Di pelajaran sebelumnya, kita sudah mempelajari lokasi UI halaman kita. Kita akan lanjut belajar pada pelajaran ini.

Memahami Satu Tampilan Web Asli (WebView)

Semua aplikasi seluler yang dibangun dengan NativePHP menggunakan satu tampilan web asli (WebView) sebagai wadah utama. Tampilan web memungkinkan kamu membuat antarmuka aplikasi dengan teknologi web frontend apa pun yang kamu kuasai. Karena pada dasarnya ini adalah halaman web, browser tertanam akan merender semua konten halaman tersebut.

Secara bawaan, WebView akan memenuhi seluruh area layar yang terlihat. Namun saat membuka fitur seperti kamera, antarmuka kamera akan menutup WebView sementara.

Inti dari NativePHP: Backend PHP + pengembangan hibrida dengan stack frontend apapun (Vue, jQuery, Tailwind dan lainnya)

WebView selalu ditampilkan di paling depan, hanya layar penuh seperti kamera atau browser bawaan yang akan menutupnya. Semua UI yang terlihat pengguna dirender oleh WebView.

Arsitektur dasar NativePHP Mobile: Wadah WebView tunggal, tanpa lapisan halaman asli banyak. Artinya NativePHP hanya memiliki satu halaman saja; semua perpindahan halaman dan tombol kembali berjalan di dalam WebView yang sama.

Aplikasi seluler NativePHP selalu hanya memiliki satu kontrol WebView asli. Semua proses render halaman aplikasi berada di dalam wadah web ini:

• Perpindahan halaman, peralihan rute, kembali ke halaman sebelumnya, popup, sub halaman dan peralihan SPA tidak akan pernah membuat WebView kedua. Desain ini bertujuan mengurangi penggunaan memori.
• Tidak ada tumpukan halaman asli Android/iOS serta hierarki Activity/ViewController;
• Beberapa “halaman” yang kita lihat sebenarnya hanyalah peralihan DOM di dalam satu WebView melalui rute frontend (Laravel / Livewire / Vue Router dll), logikanya sama persis dengan aplikasi web satu halaman biasa.

1 Pengaturan Viewport (tag meta untuk penyesuaian layar)

Siapa pun yang pernah membuat situs web seluler pasti sudah mengenal pengaturan ini.

Sama seperti browser biasa, WebView memiliki konsep Viewport (area tampilan), dikontrol dengan tag meta dengan sintaks yang sama persis dengan halaman web tradisional.

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

Tambahkan tag meta ini di file HTML atau Blade PHP kamu. Saat ini hampir semua situs web memasang konfigurasi ini agar bisa menyesuaikan diri dengan browser ponsel. Tanpa konfigurasi ini, halaman akan dirender berdasarkan standar PC: tulisan terlihat tipis dan tata letak berantakan, karena ponsel memiliki resolusi DPI yang tinggi.

Kamu bisa coba di situs mana saja, contoh dokumentasi resmi NativePHP: Web View – NativePHP mobile v3 – NativePHP. Klik kanan halaman lalu lihat kode sumber untuk melihat tag tersebut.

Pengaturan ini memiliki dua atribut utama:

width=device-width: Lebar halaman sama dengan lebar fisik layar perangkat

initial-scale=1: Skala awal tampilan 1:1, tidak ada perbesaran/perkecilan otomatis

2 Nonaktifkan Zoom Dua Jari (Mensimulasikan Pengalaman Aplikasi Asli)

Aplikasi asli Android atau iOS tidak mengizinkan pengguna memperbesar/kecil layar dengan dua jari, berbeda dengan browser ponsel. Agar tampilan NativePHP mirip aplikasi asli, kamu harus menonaktifkan gerakan zoom ini.

Saat mengembangkan aplikasi seluler kita butuh kontrol penuh atas tampilan, melarang zoom manual akan menghasilkan perilaku yang sama dengan aplikasi murni asli.

Tambahkan atribut berikut ke tag viewport yang sudah ada:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

user-scalable=no: Menonaktifkan gerakan zoom manual

3 Render Sampai Tepi Layar Edge-to-Edge (Prasyarat untuk Layar Notch dan Lengkung)

Untuk memaksimalkan kebebasan desain UI, WebView secara bawaan memenuhi seluruh layar. Hanya dengan HTML/CSS/JS kamu bisa menempatkan konten di posisi mana pun di layar depan.

Tetapi tidak seluruh permukaan layar bisa digunakan dengan normal. Sebagian besar perangkat memiliki notch kamera depan, sudut melengkung, tepi layar lengkung atau Dynamic Island di iPhone. Area ini masuk ke dalam viewport namun menutup konten dan tidak bisa diklik.

Untuk menyesuaikan layar berbentuk khusus, tambahkan viewport-fit=cover di tag meta viewport dan gunakan bersama jarak aman (Safe Area Insets).

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

viewport-fit=cover: Membolehkan halaman dirender sampai tepi paling luar layar (termasuk notch dan sudut melengkung). Hanya parameter ini saja tidak cukup karena konten akan tertutup notch, wajib gunakan bersama gaya CSS Safe Area, silakan baca bagian selanjutnya.

Area Aman Safe Areas

Area aman adalah bagian layar yang tidak tertutup dan bisa dilihat: tidak tertutup struktur perangkat keras (sudut melengkung, notch kamera depan, Dynamic Island) maupun antarmuka sistem yang permanen (bilah gerakan bawah, bilah status).

Perangkat akan menghitung batas area aman secara otomatis dan menyesuaikan dinamis saat berganti]]> https://www.foxdevelop.com/id/2026/07/04/tampilan-halaman-webview/feed/ 0 https://www.foxdevelop.com/id/2026/07/04/3237/ https://www.foxdevelop.com/id/2026/07/04/3237/#respond Sat, 04 Jul 2026 09:46:40 +0000 https://www.foxdevelop.com/?p=3237 Pada pelajaran sebelumnya, kita membuat aplikasi standar menggunakan NativePHP dan membukanya di browser. Alamat defaultnya adalah: http://127.0.0.1:8000/

Halaman ini pada dasarnya adalah halaman web, jadi tidak ada masalah sama sekali. Tampilan UI NativePHP dibuat dengan HTML, CSS dan JS. Lalu bagaimana cara mengubah tampilan ini?

Semua file yang bertugas menampilkan antarmuka tersimpan di folder resources yang ada di direktori proyek

Di perangkat saya, path lengkapnya adalah sebagai berikut:

Buka folder tersebut, kamu akan melihat subfolder berikut:

Folder css untuk menyimpan style, folder js untuk skrip, sedangkan views berisi file PHP halaman. Di dalam views terdapat file-file berikut

Buka file welcome.blade.php

Bagian isinya terlihat seperti ini:

Terasa familiar kan? Ini adalah kode PHP milikmu. Mari kita coba ubah sedikit

Cari bagian subjudul:

<p class="subtitle">Your app is ready.</p>

Tambahkan satu kalimat di bagian akhir:

<p class="subtitle">Your app is ready.welcome to foxdevelop.com</p>

Simpan file lalu refresh halaman http://127.0.0.1:8000/

Kamu bisa melihat subjudul antarmuka sudah berubah sesuai teks yang kamu edit. Silakan coba sendiri. NativePHP tidak membatasi teknologi frontend apapun, kamu bebas menggunakan tools atau framework apapun seperti Livewire, Vue, React, Svelte, HTMX bahkan jQuery.

Pada pelajaran ini, cari dulu folder resources dan coba edit file di dalamnya untuk memahami struktur teknis NativePHP. Nanti kita akan bahas secara mendalam semua hal terkait antarmuka ini.

Mengapa memilih PHP?

PHP adalah bahasa pemrograman yang sangat matang dengan pengembangan selama lebih dari tiga puluh tahun dan terus ditingkatkan seiring penggunaan di lingkungan nyata. Bahasa ini mendukung sebagian besar situs web di internet. WordPress, alat pembuat situs sumber terbuka paling populer di dunia, merupakan pencapaian terbesar PHP. Dulu hanya terbatas pada pengembangan web, kini PHP telah berkembang ke pembuatan aplikasi desktop dan seluler berkat proyek seperti NativePHP.

Apa sebenarnya NativePHP?

• Kumpulan pustaka praktis yang memungkinkan kode PHP berinteraksi dengan lancar bersama sistem operasi dasar.
• Berbagai alat bantu untuk mengompilasi dan mengemas hasil build aplikasi asli yang telah selesai dibuat.
• Lingkungan eksekusi PHP statis yang mandiri. Aplikasi yang telah dikemas dapat berjalan di mana saja tanpa pengguna perlu memasang lingkungan eksekusi tambahan secara manual.

Apa itu Laravel?

Laravel adalah kerangka kerja PHP yang sangat populer. Secara sederhana, kerangka kerja adalah struktur pengembangan yang sudah dibuat menggunakan PHP. Menggunakannya akan menghindari penulisan ulang kode dasar yang berulang dan mempercepat proses pengembangan secara signifikan.

Berbeda dengan kebanyakan kerangka kerja pengembangan desktop dan seluler umumnya, NativePHP bukanlah kerangka kerja antarmuka asli. Ia tidak menampilkan elemen kendali antarmuka sistem operasi secara langsung, melainkan berjalan di atas mesin peramban web yang tertanam. Berkat desain ini, Anda bebas menggunakan tumpukan teknologi frontend apapun: HTML & CSS murni, React, Vue, Tailwind CSS, Bootstrap maupun Material UI semuanya didukung sepenuhnya.

NativePHP dilengkapi dengan berbagai fitur bawaan yang memenuhi kebutuhan umum:

• Manajemen jendela asli
• Kontrol menu sistem dan menu aplikasi
• Operasi pada sistem berkas lokal
• Integrasi basis data SQLite bawaan
• Notifikasi dorong asli untuk desktop

Jenis aplikasi apa saja yang dapat dikembangkan dengan NativePHP?

Hampir semua hal yang dapat Anda bayangkan. Penjadwal tugas, alat perekam layar dan berbagai utilitas desktop lainnya merupakan proyek yang dapat diwujudkan.

NativePHP untuk desktop siap digunakan secara komersial di lingkungan produksi.

Pengaturan & Pemasangan

Pastikan lingkungan lokal Anda memenuhi semua syarat berikut:

1. PHP 8.3 atau versi yang lebih baru
2. Laravel 11 atau versi yang lebih baru
3. Node.js 22 atau versi yang lebih baru
4. Windows 10 ke atas, macOS 12 ke atas atau distribusi Linux utama manapun
5. Composer

Tentang PHP & Node.js

Agar proses pengembangan berjalan lancar, pasanglah PHP dan Node.js secara langsung di perangkat pengembangan lokal Anda.

Mengapa Node.js dibutuhkan?

NativePHP untuk desktop dibangun di atas Electron, yang sepenuhnya bergantung pada Node.js dan npm untuk memasang dependensi frontend serta mengemas sumber daya akhir aplikasi.

Pemasangan Node.js sangat mudah: kunjungi situs resmi, unduh penginstal lalu ikuti panduan pengaturan standar seperti aplikasi desktop pada umumnya.

Atur lingkungan pengembangan Anda sesuai daftar di atas. Di bagian selanjutnya, kita akan mulai membuat aplikasi desktop pertama menggunakan NativePHP.

Kita akan memulai dari awal dan menyiapkan proyek baru:

Buat folder kosong di PC Anda untuk menyimpan berkas proyek, contoh: D:\phpproject

Buka CMD langsung ke direktori ini: ketik cmd di bilah alamat folder lalu tekan Enter; jendela perintah akan terbuka dan berpindah jalur secara otomatis.

Jalankan perintah di bawah ini:

composer create-project --prefer-dist nativephp/mobile-starter my-app
cd my-app
php artisan native:jump

Catatan singkat pemecahan masalah (lewati bagian ini jika Anda menggunakan PHP 8.3)

composer create-project --prefer-dist nativephp/mobile-starter my-app
Creating a "nativephp/mobile-starter" project at "./my-app"
Installing nativephp/mobile-starter (1.0.4)
  - Downloading nativephp/mobile-starter (1.0.4)
  - Installing nativephp/mobile-starter (1.0.4): Extracting archive
Created project in D:\phpproject\my-app
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires nativephp/mobile ^3.0 -> satisfiable by nativephp/mobile[3.0.0, ..., 3.3.5].
    - nativephp/mobile[3.0.0, ..., 3.3.5] require php ^8.3 -> your php version (8.2.31) does not satisfy that requirement.

Kesalahan ini muncul karena PHP lokal Anda berversi 8.2; Anda perlu memperbarui ke PHP 8.3 untuk melanjutkan.

https://windows.php.net/download#php-8.3

Kunjungi halaman tersebut untuk mengunduh PHP 8.3. Pengguna Windows 64-bit bisa langsung mengunduh paket di bawah ini:

https://downloads.php.net/~windows/releases/archives/php-8.3.31-nts-Win32-vs16-x64.zip

Setelah selesai mengunduh, ekstrak semua berkas ke D:\php8.3. Anda bisa memilih jalur folder lain, pastikan hanya menggunakan karakter bahasa Inggris.

Setelah ekstraksi, ganti nama berkas konfigurasi:
Ubah php.ini-development menjadi php.ini

Buka berkas php.ini dan hapus tanda titik koma di awal baris untuk menghapus komentar;

Hapus tanda titik koma pada semua daftar di bawah (langkah penting):

extension_dir = "ext"
extension=curl
extension=gd
extension=mbstring
extension=mysqli
extension=pdo_mysql
extension=zip
extension=openssl
extension=fileinfo
extension=sqlite3
extension=pdo_sqlite

Perbarui variabel lingkungan sistem, ganti jalur lama D:\php8.2 dengan D:\php8.3.

Verifikasi instalasi PHP dengan perintah php -v; jika versi sudah benar, lanjutkan penyiapan proyek.

Melanjutkan pembuatan proyek NativePHP Mobile

Sekarang jalankan kembali perintah instalasi:

composer create-project --prefer-dist nativephp/mobile-starter my-app
cd my-app

Instalasi yang berhasil tidak akan menampilkan pesan kesalahan berwarna merah di terminal.

Untuk pengujian di ponsel fisik, hubungkan perangkat ke PC menggunakan kabel USB terlebih dahulu, lalu aktifkan Opsi Pengembang dan Debug USB di ponsel Anda.

Gunakan perintah berikut untuk pengujian cepat di perangkat fisik (Memulai cepat di perangkat asli: Instal aplikasi Jump di ponsel, pindai kode QR untuk terhubung dan melakukan debug, tidak perlu mengompilasi APK secara penuh):

php artisan native:jump

Jika tidak memiliki perangkat ponsel fisik, gunakan perintah alternatif berikut untuk pengujian di emulator:

php artisan native:serve : Untuk pratinjau desktop atau pengujian emulator (membuka jendela aplikasi mandiri di komputer)

Jika semua berjalan normal, Anda akan melihat keluaran serupa di bawah setelah menjalankan php artisan native:jump

php artisan native:jump

Server NativePHP Jump

Server Laravel ……………………………………………………………………. http://127.0.0.1:8000
Persiapan Laravel ………………………………………………………………… selesai dalam 0,42 detik (HTTP 200)

Buka http://127.0.0.1:8000 di browser untuk melihat konten aplikasi yang sedang berjalan.

Laravel – Rangka kerja ringkas untuk pengembang

Jalankan perintah berikut untuk membuat proyek Laravel baru

laravel new my-app --using=nativephp/mobile-starter
 
cd my-app
 
php artisan native:jump

Catatan: Anda harus sudah menginstal Laravel terlebih dahulu sebelum menjalankan perintah di atas.

Cara Menginstal Laravel?

Apa sebenarnya Laravel?

Laravel adalah kerangka kerja web PHP yang sangat populer dan mudah digunakan. Kerangka ini dilengkapi dengan alat bawaan untuk login & pendaftaran pengguna, unggah berkas, pengiriman email, operasi basis data, dan validasi formulir. Laravel mampu mempercepat proses pengembangan aplikasi PHP secara signifikan.

Karena Laravel berjalan di atas PHP, pastikan Anda telah memasang PHP terlebih dahulu. Perhatikan juga persyaratan versi; versi PHP yang sudah kedaluwarsa tidak dapat digunakan bersama Laravel terbaru.

PHP ≥ 8.1 (disarankan 8.2 ~ 8.4)

Menginstal PHP

Lihat panduan lengkap saya untuk menginstal PHP:

Menginstal Lingkungan PHP – FoxDevelop

Menginstal Composer

Composer berfungsi sebagai manajer paket untuk PHP, setara dengan NuGet pada .NET atau Maven/Gradle untuk Java.

Lihat tutorial terpisah saya untuk langkah-langkah pemasangan Composer.

Menginstal Manajer Paket PHP Composer – FoxDevelop

Setelah PHP dan Composer siap digunakan, kita bisa lanjut menginstal Laravel.

Buka CMD dan periksa versi perangkat lunak terlebih dahulu.

Persyaratan versi PHP: PHP ≥ 8.1 (disarankan 8.2 / 8.5), jalankan perintah php -v

Persyaratan versi Composer: Composer ≥ 2.5, jalankan perintah composer -V

Selanjutnya periksa ekstensi PHP yang dibutuhkan:

php -m | findstr mbstring
php -m | findstr openssl
php -m | findstr pdo

Pengguna di Tiongkok dapat beralih ke sumber cermin Alibaba untuk mengatasi kecepatan unduh yang lambat. Salin perintah ini ke dalam CMD:

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

Sekarang mulai proses pemasangan dengan perintah create-project:

composer create-project laravel/laravel myproject
cd myproject

Saya mengalami kesalahan karena ekstensi zip tidak terpasang pada langkah ini. Jika pemasangan berjalan lancar, lewati bagian pemecahan masalah di bawah dan langsung menuju halaman ini.

Pesan kesalahan yang muncul seperti berikut:

C:\Users\xxxx>composer create-project laravel/laravel myproject
Creating a "laravel/laravel" project at "./myproject"
Installing laravel/laravel (v12.10.0)
    Failed to download laravel/laravel from dist: The zip extension and unzip/7z commands are both missing, skipping.
The php.ini used by your command-line PHP is: D:\php8.2\php.ini
    Now trying to download from source
  - Syncing laravel/laravel (v12.10.0) into cache

Jalankan perintah pemeriksaan di CMD untuk memastikan ekstensi zip belum tersedia:

php -m | findstr zip

Jika tidak ada hasil yang ditampilkan, berarti ekstensi zip masih dinonaktifkan.

Mengedit php.ini untuk mengaktifkan ekstensi zip

Lokasi berkas konfigurasi PHP saya: D:\php8.2\php.ini

Cari baris ;extension=zip dan hapus tanda titik koma di awal baris.

Jalankan kembali perintah php -m | findstr zip di CMD; hasil yang valid menandakan ekstensi telah aktif.

Coba lakukan pemasangan kembali

Jalankan perintah pemasangan sekali lagi:

composer create-project laravel/laravel myproject

Pemasangan kembali mengalami kegagalan dengan catatan log di bawah ini:

composer create-project laravel/laravel myproject
Creating a "laravel/laravel" project at "./myproject"
Installing laravel/laravel (v12.10.0)
  - Downloading laravel/laravel (v12.10.0)
    Failed downloading laravel/laravel, trying the next URL (404: The "https://mirrors.aliyun.com/composer/dists/laravel/laravel/76396a056d552b8a34077f151775037ac44b431a.zip" file could not be downloaded (HTTP/2 404 ))
  - Downloading laravel/laravel (v12.10.0)
  - Installing laravel/laravel (v12.10.0): Extracting archive
Created project in C:\Users\maiwu\myproject
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires laravel/tinker ^2.10.1, it is satisfiable by laravel/tinker[v2.10.1, v2.10.2, v2.11.0, v2.11.1] from composer repo (https://repo.packagist.org) but laravel/tinker[2.x-dev] from composer repo (https://mirrors.aliyun.com/composer) has higher repository priority. The packages from the higher priority repository do not match your minimum-stability and are therefore not installable. That repository is canonical so the lower priority repo's packages are not installable. See https://getcomposer.org/repoprio for details and assistance.
  Problem 2
    - Root composer.json requires phpunit/phpunit ^11.5.3, found phpunit/phpunit[11.5.3, ..., 11.5.44] but these were not loaded, because they are affected by security advisories ("PKSA-z3gr-8qht-p93v", "PKSA-z3gr-8qht-p93v"). Go to https://packagist.org/security-advisories/ to find advisory details. To ignore the advisories, add them to the audit "ignore" config. To turn the feature off entirely, you can set "block-insecure" to false in your "audit" config.
  Problem 3
    - Root composer.json requires laravel/sail ^1.41 -> satisfiable by laravel/sail[v1.41.0, ..., v1.46.0].
    - laravel/sail[v1.41.0, ..., v1.46.0] require symfony/yaml ^6.0|^7.0 -> found symfony/yaml[v6.0.0, ..., v6.4.30, v7.0.0, ..., v7.4.1] but these were not loaded, because they are affected by security advisories ("PKSA-v5yj-8nmz-sk2q", "PKSA-ft77-7h5f-p3r6", "PKSA-b14r-zh1d-vdrc", "PKSA-v5yj-8nmz-sk2q", "PKSA-ft77-7h5f-p3r6", "PKSA-b14r-zh1d-vdrc"). Go to https://packagist.org/security-advisories/ to find advisory details. To ignore the advisories, add them to the audit "ignore" config. To turn the feature off entirely, you can set "block-insecure" to false in your "audit" config.
  Problem 4
    - Root composer.json requires laravel/framework ^12.0 -> satisfiable by laravel/framework[v12.1.1, ..., v12.40.0].
    - laravel/framework[v12.1.1, ..., v12.12.0] require league/commonmark ^2.6 -> found league/commonmark[2.6.0] but these were not loaded, because they are affected by security advisories ("PKSA-21fb-n1x5-5nf7", "PKSA-2cx9-ynrq-qdk3", "PKSA-rqc2-tcc6-nc79", "PKSA-21fb-n1x5-5nf7", "PKSA-2cx9-ynrq-qdk3", "PKSA-rqc2-tcc6-nc79"). Go to https://packagist.org/security-advisories/ to find advisory details. To ignore the advisories, add them to the audit "ignore" config. To turn the feature off entirely, you can set "block-insecure" to false in your "audit" config.
    - laravel/framework[v12.13.0, ..., v12.40.0] require league/commonmark ^2.7 -> satisfiable by league/commonmark[2.7.0, ..., 2.8.2] from composer repo (https://repo.packagist.org) but league/commonmark[dev-main, 2.7.x-dev, 2.8.x-dev, 2.9.x-dev (alias of dev-main)] from composer repo (https://mirrors.aliyun.com/composer) has higher repository priority. The packages from the higher priority repository do not match your minimum-stability and are therefore not installable. That repository is canonical so the lower priority repo's packages are not installable. See https://getcomposer.org/repoprio for details and assistance.

Penyebab: Sumber cermin Composer milik Alibaba tidak berfungsi dengan normal.

Hapus folder proyek yang bermasalah terlebih dahulu, kemudian kembalikan ke sumber resmi:

rmdir /s /q myproject
composer config -g --unset repos.packagist
composer create-project laravel/laravel myproject --no-audit

Pemasangan masih gagal, bersihkan sisa berkas sekali lagi:

- Downloading phpunit/php-code-coverage (11.0.12)
  - Downloading phar-io/version (3.2.1)
  - Downloading phar-io/manifest (2.0.4)
  - Downloading myclabs/deep-copy (1.13.4)
  - Downloading phpunit/phpunit (11.5.55)
 110/111 [===========================>]  99%A connection timeout was encountered. If you intend to run Composer without connecting to the internet, run the command again prefixed with COMPOSER_DISABLE_NETWORK=1 to make Composer run in offline mode.
    Failed to download laravel/pint from dist: The "https://codeload.github.com/laravel/pint/legacy.zip/0770e9b7fafd50d4586881d456d6eb41c9247a80" file could not be written to C:\Users\maiwu\myproject/vendor/composer/tmp-60f6b8b4815321558e13bb1ac74423ee.zip: Failed to open stream: Permission denied
    Now trying to download from source
  - Syncing laravel/pint (v1.29.1) into cache
Cloning failed using an ssh key for authentication, enter your GitHub credentials to access private repos
You need to provide a GitHub access token.
Tokens will be stored in plain text in "C:/Users/maiwu/AppData/Roaming/Composer/auth.json" for future use by Composer.
Due to the security risk of tokens being exfiltrated, use tokens with short expiration times and only the minimum permissions necessary.

Carefully consider the following options in order:

1. When you don't use 'vcs'  type 'repositories'  in composer.json and do not need to clone source or download dist files
from private GitHub repositories over HTTPS, use a fine-grained token with read-only access to public information.
Use the following URL to create such a token:
https://github.com/settings/personal-access-tokens/new?name=Composer+on+DESKTOP-1OHC5Q4+2026-05-27+0946

2. When all relevant _private_ GitHub repositories belong to a single user or organisation, use a fine-grained token with
repository "content" read-only permissions. You can start with the following URL, but you may need to change the resource owner
to the right user or organisation. Additionally, you can scope permissions down to apply only to selected repositories.
https://github.com/settings/personal-access-tokens/new?contents=read&name=Composer+on+DESKTOP-1OHC5Q4+2026-05-27+0946

3. A "classic" token grants broad permissions on your behalf to all repositories accessible by you.
This may include write permissions, even though not needed by Composer. Use it only when you need to access
private repositories across multiple organisations at the same time and using directory-specific authentication sources
is not an option. You can generate a classic token here:
https://github.com/settings/tokens/new?scopes=repo&description=Composer+on+DESKTOP-1OHC5Q4+2026-05-27+0946

For additional information, check https://getcomposer.org/doc/articles/authentication-for-private-packages.md#github-oauth
Token (hidden):

Selanjutnya jalankan perintah pemasangan yang telah diperbaiki:

composer create-project laravel/laravel myproject --no-dev --no-audit

Pasang Laravel tanpa permintaan token GitHub dan dependensi tambahan:
Tambahkan parameter –no-dev dan –no-audit untuk melewati paket pint/phpunit yang memicu pengunduhan kode sumber dari GitHub:

Pemasangan berhasil jika Anda melihat tampilan yang serupa dengan ini:

- Installing league/commonmark (2.8.2): Extracting archive
  - Installing laravel/framework (v12.61.0): Extracting archive
75 package suggestions were added by new dependencies, use `composer suggest` to see details.
Package sebastian/code-unit is abandoned, you should avoid using it. No replacement was suggested.
Package sebastian/code-unit-reverse-lookup is abandoned, you should avoid using it. No replacement was suggested.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/termwind ......................................................................................................................... DONE

Sekarang kita akan menguji proyek yang baru dibuat. Perintah sebelumnya akan membuat folder myproject yang berisi seluruh berkas kode sumber.

Tetap buka jendela CMD yang ada dan jalankan dua baris perintah berikut:

cd myproject
php artisan serve

Tampilan jendela CMD akan seperti ini:

C:\Users\xxxx>cd myproject
C:\Users\xxxx\myproject>php artisan serve
   INFO  Server running on [http://127.0.0.1:8000].
   Press Ctrl+C to stop the server

Salin alamat http://127.0.0.1:8000 ke bilah alamat peramban untuk melihat halaman utama bawaan Laravel.

Buka halaman ini di peramban Anda: https://getcomposer.org/download/, cari bagian Windows Installer dan unduh berkas pemasang Composer-Setup.exe.

Klik kanan pada berkas pemasang dan jalankan sebagai administrator.

Pemasang akan mendeteksi folder PHP secara otomatis selama proses penyiapan. Jika jalur tidak ditemukan, pilih direktori PHP secara manual.

Biarkan kotak centang tidak terisi, lalu terus klik Berikutnya dengan pengaturan bawaan.

Pertama, unduh PHP dari halaman unduhan resmi: https://windows.php.net/download/

Pilih PHP 8.2 (versi yang disarankan) lalu unduh paket ZIP.

Anda bisa langsung mengakses tautan unduhan ini: PHP: Unduhan

Gulir halaman ke bawah dan klik opsi unduhan zip.

Mengapa melewatkan PHP 8.5? Hingga tahun 2026, versi PHP yang lebih baru mungkin mengalami masalah kompatibilitas dengan Laravel. Untuk keperluan pembelajaran, kombinasi PHP 8.2 dan Laravel 12 adalah yang paling ideal. Kombinasi ini stabil, jarang mengalami kesalahan, dan banyak panduan yang tersedia secara online. Saat Anda menyelesaikan kursus ini, PHP 8.5 kemungkinan sudah matang, jadi sesuaikan versi sesuai kondisi Anda.

Setelah unduhan selesai, ekstrak berkas php-8.2.31-nts-Win32-vs16-x64.zip dan mulai proses penyiapan.

Ekstrak php-8.2.31-nts-Win32-vs16-x64.zip ke jalur berkas yang pendek tanpa spasi atau karakter khusus, contoh: D:\php8.2

Buka folder hasil ekstraksi. Anda akan menemukan dua berkas konfigurasi untuk lingkungan pengembangan dan lingkungan produksi.

Cari kedua berkas berikut:

• php.ini-development (untuk pengembangan lokal)
• php.ini-production (untuk server aktif, jangan diubah untuk sementara)

Buat salinan cadangan dari php.ini-development, lalu ganti nama salah satu salinan menjadi php.ini.

Buka php.ini menggunakan Notepad dan ubah beberapa pengaturan.

• Cari baris ;extension_dir = “ext” dan hapus tanda titik koma di awal;

• Aktifkan semua ekstensi yang dibutuhkan Laravel dengan menghapus tanda titik koma di depan setiap baris:

extension=curl
extension=fileinfo
extension=mbstring
extension=openssl
extension=pdo_mysql

Simpan berkas php.ini yang telah diubah.

Langkah penting: tambahkan direktori D:\php8.2 ke variabel lingkungan sistem.

Cari variabel lingkungan dari Menu Mulai dan edit bagian Path.

Sekarang verifikasi pemasangan PHP dengan membuka jendela CMD biasa.

Jalankan perintah berikut: php -v

php -v

Jika informasi versi PHP muncul di layar, berarti pemasangan telah berhasil.

Tampilan di atas membuktikan bahwa PHP telah terpasang dengan benar di komputer Anda.

Anda dapat mengunjungi situs resminya di sini：Baking Delicious Native Apps – NativePHP

Bagaimana cara kerja NativePHP?

Cara kerjanya tidak rumit, dan konsep dasarnya sama dengan banyak aplikasi lainnya. PHP biasa bergantung pada penerjemah yang dihosting di server jarak jauh. NativePHP menggabungkan runtime PHP langsung ke dalam berkas EXE akhir atau berkas pemasangan aplikasi. Tim pengembang proyek juga telah menyempurnakan runtime yang disertakan untuk meningkatkan performa.

Berikut adalah diagram resmi:

NativePHP menggabungkan seluruh runtime PHP dengan aplikasi Anda. Aplikasi seluler akan dibungkus menggunakan Swift atau Kotlin, sedangkan perangkat lunak desktop menggunakan Electron. Platform ini menggunakan koneksi jembatan khusus untuk mengakses fitur perangkat keras dan menampilkan antarmuka aplikasi melalui WebView asli bawaan. Anda tetap dapat menulis kode dengan PHP biasa, cukup tambahkan beberapa ekstensi untuk terhubung dengan fungsi asli perangkat. Konsepnya sangat sederhana: semua kode PHP Anda berjalan secara langsung di perangkat pengguna.

Lihat diagram di sebelah kiri, setiap aplikasi NativePHP dibungkus dengan kode shell Swift atau Kotlin, dengan runtime PHP lengkap dan ekstensi PHP kustom di dalamnya.

Ekstensi PHP kustom yang tertera pada diagram adalah komponen utama yang memungkinkan PHP mengakses fitur asli sistem. Secara dasar, ini adalah plugin PHP buatan khusus untuk NativePHP. Ekstensi ini menerima permintaan dari PHP dan meneruskannya ke kode jembatan Swift atau Kotlin di bawahnya untuk menjalankan perintah sistem sebenarnya. Data yang dikirimkan kembali oleh sistem akan dikembalikan ke PHP melalui ekstensi yang sama.

Ekstensi kustom ini sangat penting. Tanpanya, NativePHP tidak akan berfungsi dan kita tidak dapat membuat aplikasi lokal menggunakan PHP sama sekali.

Pengguna melihat seluruh konten melalui Native WebView, mesin peramban ringan yang tertanam di dalam aplikasi untuk memuat halaman PHP dan HTML. Ini bukan versi lengkap Chrome, melainkan hanya komponen peramban yang dikemas ke dalam aplikasi jadi.

Sekarang Anda sudah memahami dasar-dasar NativePHP. Kita akan mulai dengan mempelajari cara membuat aplikasi seluler, kemudian lanjut ke pengembangan desktop di kemudian hari.

Jika Anda sudah membuat kode dengan PHP, Anda tidak perlu mempelajari bahasa pemrograman yang benar-benar baru untuk membangun aplikasi asli penuh untuk iOS dan Android, dan itulah yang memungkinkan NativePHP untuk Seluler. Ini juga merupakan alat pertama jenisnya yang memungkinkan kode PHP lengkap berjalan secara asli pada perangkat keras seluler, tanpa memerlukan server web eksternal sama sekali.

Alat ini mengemas runtime PHP yang telah dikompilasi sebelumnya bersama dengan kerangka Laravel langsung di dalam aplikasi akhir Anda. Ini juga membuat tautan mulus ke API sistem asli setiap platform, memungkinkan pengembang membangun perangkat lunak seluler asli yang asli menggunakan sintaks PHP yang familiar. Aplikasi yang dibangun dengan cara ini berjalan lancar dan dirancang untuk bekerja sempurna secara offline.

Keuntungan Utama Kerangka Ini

Pertama-tama, ia menawarkan kinerja tingkat asli yang sebenarnya. Didukung oleh runtime PHP tertanam yang dioptimalkan untuk seluler, ini secara mendasar berbeda dari aplikasi biasa yang dibungkus halaman web dan memberikan pengalaman yang mendekati perangkat lunak asli sepenuhnya.

1. Anda mendapatkan akses langsung ke fitur asli perangkat. Fungsi perangkat keras umum seperti kamera perangkat, otentikasi biometrik, dan notifikasi push semuanya dapat dipanggil secara langsung, dan Anda dapat membangun antarmuka menggunakan kontrol asli asli platform. Semuanya berada dalam satu pustaka terpadu untuk alur pengembangan yang lancar.

2. Ini terintegrasi mendalam dengan seluruh ekosistem Laravel. Pengembang Laravel lama dapat menggunakan kembali keterampilan yang ada dan paket yang telah dibangun sebelumnya tanpa harus mempelajari kerangka baru yang asing dari awal.

3. Tidak ada ketergantungan pada server web eksternal sama sekali; seluruh aplikasi Anda berjalan secara lokal di perangkat, dibangun dari awal dengan fungsionalitas offline dalam pikiran. Selain itu, ia mendukung pengembangan lintas platform yang sebenarnya — kompilasi hanya satu basis kode dan hasilkan penginstal terpisah untuk iOS dan Android.

Kurva Pembelajaran yang Lembut untuk Pengembang Baru

Dengan NativePHP untuk Seluler, tidak perlu mempelajari bahasa seluler khusus seperti Swift atau Kotlin, atau membuang waktu mengonfigurasi alat pembangunan yang rumit seperti Gradle atau Xcode. Pekerjaan pengembangan Anda terbatas pada penulisan kode PHP standar.

Banyak pengembang PHP di seluruh dunia sekarang memanfaatkan pengetahuan yang ada untuk merilis aplikasi seluler jauh lebih cepat, mengurangi siklus pengembangan secara keseluruhan secara drastis. Dari menyelesaikan kode sumber hingga mengirimkan aplikasi selesai ke toko aplikasi resmi hanya membutuhkan waktu beberapa menit.

Cara Kerjanya & Cara Anda Mengembangkan Dengannya

Alur kerja yang mendasarinya sederhana. Saat mengompilasi proyek Anda, biner PHP yang telah dibangun sebelumnya akan dibundel dengan logika bisnis Anda di dalam shell asli tipis yang ditulis dalam Swift atau Kotlin. Lapisan abstraksi bawaan mengelola runtime PHP tertanam dan menjalankan kode PHP Anda secara langsung. Ekstensi PHP yang dibangun khusus kemudian menghubungkan logika PHP ke setiap fitur asli yang tersedia di ponsel target.

Anda memiliki banyak fleksibilitas saat membangun UI frontend: HTML, JavaScript, Tailwind, Blade, Livewire standar semuanya berfungsi langsung, bersama dengan kerangka populer seperti React dan Vue. Mulai dari versi 3, menggabungkannya dengan EDGE membuka penggunaan langsung kontrol UI asli platform untuk tampilan dan nuansa aplikasi yang lebih otentik. Pengembang hanya perlu memanggil fungsi pembantu bawaan yang sederhana untuk mengimplementasikan sebagian besar fungsionalitas yang diperlukan.

Jauh Lebih Mampu daripada Aplikasi yang Dibungkus Web Standar

Banyak orang salah mengira bahwa ini hanyalah situs web lain yang dibungkus di dalam wadah seluler, tetapi itu sama sekali tidak benar. Setiap bagian dari kode aplikasi Anda diinstal secara lokal bersama dengan paket aplikasi di perangkat pengguna akhir.

Berkat ekstensi PHP yang dibangun khusus, sebagian besar API sistem seluler asli sudah dapat diakses, dengan integrasi baru yang ditambahkan secara teratur. Periksa dokumentasi resmi untuk rincian lengkap tentang fungsi yang tersedia.

Berbeda dengan PWA atau solusi berbasis WebAssembly yang terjebak dengan berbagai batasan runtime, pengaturan ini memberikan eksekusi PHP penuh tanpa batas, bebas dari batasan kotak pasir dan pekerjaan pengaturan yang rumit. Ini membuka pengembangan seluler asli untuk semua pengembang PHP yang berpengalaman.

Pada akhirnya, jika Anda adalah pengembang PHP yang berencana membangun aplikasi seluler, cobalah NativePHP untuk Seluler — kemungkinan besar Anda akan terkejut dengan apa yang dapat dilakukannya.