Monday, 17 November 2025

Membuat Middleware Sederhana dengan CodeIgniter 4


 

Dalam pengembangan aplikasi web modern, middleware menjadi komponen penting untuk menangani proses yang perlu dijalankan sebelum atau sesudah sebuah request diproses oleh controller. CodeIgniter 4, sebagai versi terbaru dari framework PHP populer ini, telah menyediakan fitur middleware (disebut Filters) yang memudahkan developer mengelola autentikasi, logging, pembatasan akses, dan berbagai kebutuhan pre-processing lainnya.

Pada artikel ini, kita akan membahas langkah-langkah membuat middleware sederhana di CodeIgniter 4, mulai dari struktur dasar hingga implementasinya.

Apa itu Middleware (Filter) di CodeIgniter 4?

Secara sederhana, middleware atau filter adalah lapisan yang menangani proses tertentu sebelum request diteruskan ke controller atau setelah controller menyelesaikan prosesnya. Filter ini dapat digunakan untuk:

  •  Memeriksa status login pengguna.
  •  Membatasi akses berdasarkan role.
  •  Logging aktivitas user.
  •  Menambahkan header khusus pada response.
  •  Mengamankan API.

CodeIgniter 4 menyediakan struktur filter yang mudah digunakan dan sangat fleksibel.

Langkah 1: Membuat Filter Baru 

CodeIgniter menyediakan perintah CLI untuk membuat filter dengan cepat, tetapi kita juga bisa melakukannya secara manual. 

Membuat file filter 

Buat file baru di: app/Filters/AuthFilter.php
Isi dengan kode berikut:

 

Filter di atas akan mengecek apakah session logged_in ada. Jika tidak, pengguna diarahkan ke halaman login. 

Langkah 2: Mendaftarkan Filter ke Config 

Agar filter bisa digunakan, kita harus mendaftarkannya ke file konfigurasi filter.

Buka file: app/Config/Filters.php
Tambahkan filter yang baru kita buat: 

 

Dengan begitu, filter kita sudah memiliki alias auth dan dapat digunakan pada route atau global filter.

Langkah 3: Membuat controller 

Buat controller pada folder controller misal Home.php isinya seperi ini:

 

Langkah 4: Menggunakan Filter pada Route

Filter bisa diterapkan pada route tertentu atau grup route. Contoh: menerapkan filter ke satu route.


$routes->get('/dashboard','Dashboard::index', ['filter'=> 'auth']);

Setiap kali route /dashboard diakses, filter auth akan dijalankan terlebih dahulu.

Contoh: menerapkan filter ke grup route


$routes->group('admin', ['filter'=> 'auth'],function($routes) {
	$routes->get('users','Admin\Users::index');
    $routes->get('settings','Admin\Settings::index');
});

Semua route dalam grup admin akan terlindungi oleh filter autentikasi.

untuk file routes.php jadi seperti ini

coba cek akses pada browser dengan mengakses localhost:8080/dashboard secara langsung maka akan di arahkan ke route login. selanjutnya coba buat session terlebih dahulu dengan mengakses route localhost:8080/create-session setelah itu coba akses lagi halaman dashboard maka akan berhasil.

Kesimpulan 

Middleware atau filter di CodeIgniter 4 merupakan fitur yang sangat bermanfaat untuk menangani proses yang harus dijalankan sebelum atau sesudah request diproses. Dengan filter, Anda bisa membuat logika autentikasi, pengamanan API, logging, dan berbagai kebutuhan lain dengan lebih rapi dan terstruktur.

Pada artikel ini, kita telah membahas:

  •  Cara membuat filter sederhana
  •  Cara mendaftarkan filter ke konfigurasi
  •  Cara menggunakannya pada route dan group route

Dengan memahami konsep ini, Anda dapat membangun aplikasi yang lebih aman, terorganisir, dan mudah dirawat.

untuk mmelihat artikel lain yang bersangkutan dengan Codeigniter, bisa dilihat disini.

Sunday, 16 November 2025

Memahami Struktur Folder CodeIgniter 4: Penjelasan Lengkap untuk Pemula

 

Struktur folder dalam sebuah framework adalah hal penting yang harus dipahami oleh setiap developer sebelum mulai membangun aplikasi. CodeIgniter 4 (CI4) hadir dengan struktur yang lebih rapi, modern, dan modular dibanding versi sebelumnya. Pemahaman mendalam mengenai struktur folder CI4 akan membantu Anda bekerja lebih efisien, lebih terorganisir, serta mempermudah proses maintenance aplikasi di masa mendatang. Artikel ini akan membahas secara detail fungsi setiap folder dalam CodeIgniter 4 sehingga pemula dapat memahami cara kerja framework ini dengan baik.

1. Gambaran Umum Struktur Folder CodeIgniter 4

Setelah Anda menginstal CodeIgniter 4, baik menggunakan Composer maupun manual, Anda akan menemukan beberapa folder utama seperti:


app/
public/
writable/
tests/
system/

Setiap folder memiliki peran spesifik. Ada yang digunakan untuk menyimpan kode aplikasi, public assets, file hasil upload, hingga file sistem inti CI4. Pemisahan ini memberikan keamanan dan struktur yang lebih jelas bagi developer.

2. Folder app/

Folder app adalah pusat utama aplikasi Anda. Semua logika bisnis, konfigurasi inti aplikasi, controller, model, view, hingga filter disimpan di sini.

Struktur folder di dalam app biasanya seperti berikut:

    a. app/Controllers

Folder ini menyimpan controller, yaitu komponen yang mengatur alur aplikasi.
Contohnya:


<?php

  namespace App\Controllers;
  
  class Home extends BaseController{
  	public function index(){
  		return view('welcome_message');
  	}
  }

Controller bertugas menerima request dan mengembalikan response.

    b. app/Models

Folder ini berisi model yang berfungsi untuk berinteraksi dengan database.
Misalnya:


<?php
   namespace App\Models;
   
   use CodeIgniter\Model;
   
   class UserModel extends Model{
      protected $table ='users';
   }
  

Model dapat melakukan operasi CRUD dan query builder.

    c. app/Views

Folder yang menyimpan file tampilan (HTML, PHP template).
Misalnya:
welcome_message.php

Views digunakan untuk menampilkan data ke pengguna.

    d. app/Config

Berisi file konfigurasi aplikasi seperti:

  • BaseURL
  • Filters
  • Database
  • Email
  • Routing

Ini adalah folder penting yang sering Anda ubah saat pengembangan aplikasi.

    e. app/Filters

Berisi filter seperti authentication, logging, atau middleware lain.

    f. app/Helpers

Tempat menaruh file helper custom (fungsi global yang dapat dipanggil dari mana saja).

3. Folder public/

Folder ini adalah document root aplikasi, artinya semua file di sini dapat diakses secara langsung oleh browser. Folder ini biasanya berisi:

  • index.php (entry point aplikasi)
  • Asset frontend seperti CSS, JS, gambar
  • File upload jika tidak dipindah ke writable

Tujuan folder ini adalah mencegah file sensitif di luar public agar tidak bisa diakses langsung dari internet, sehingga meningkatkan keamanan.

4. Folder writable/

Folder writable digunakan untuk menyimpan file yang dapat ditulis (writeable) oleh aplikasi.
Isinya bisa berupa:

  • cache/
  • debugbar/
  • logs/
  • uploads/
  • sessions/

Folder ini sangat penting untuk keperluan logging, caching, dan debugging selama pengembangan aplikasi.

CI4 memisahkan folder ini agar tidak tercampur dengan file sistem dan lebih aman saat deploy.

5. Folder system/

Folder system adalah inti dari framework CodeIgniter 4. Semua file penting yang membentuk CI4 berada di sini: class inti, helper bawaan, library, routing engine, dan banyak komponen internal lainnya.

Anda tidak dianjurkan mengubah file di folder ini, karena:

  1. Bisa merusak framework

  2. Akan tertimpa saat update versi

  3. Menyulitkan debugging

Jika perlu melakukan perubahan, gunakan extension melalui folder app atau app/Libraries.

6. Folder tests/

Folder ini dibuat untuk pengujian aplikasi menggunakan PHPUnit.
Jika Anda ingin menerapkan Test Driven Development (TDD), folder ini akan sangat bermanfaat untuk:

  • Unit testing
  • Feature testing
  • CI/CD pipeline

Meskipun pemula sering mengabaikannya, folder ini sangat penting untuk aplikasi berskala besar.

7. File .env

Selain folder, ada juga file .env yang digunakan untuk menyimpan konfigurasi environment seperti:

  • Mode development/production
  • Koneksi database
  • Email SMTP
  • Debug mode

File ini tidak dimasukkan ke GitHub (harus di-ignore) karena biasanya mengandung data sensitif seperti password database.

Kesimpulan

Struktur folder CodeIgniter 4 dirancang agar rapi, aman, dan modular. Dengan memahami fungsi setiap folder seperti app, public, writable, system, dan lainnya, Anda akan lebih mudah dalam mengembangkan aplikasi berbasis CI4. Pemahaman ini sangat penting terutama bagi pemula agar tidak salah menempatkan file dan mampu mengikuti best practice pengembangan aplikasi web.

untuk melihat topik yang bersangkutan dengan artikel ini bisa cek disini 

 

Panduan Belajar CodeIgniter 4 untuk Pemula dari Nol

 


CodeIgniter 4 (CI4) adalah salah satu framework PHP yang ringan, cepat, dan mudah dipelajari. Meskipun sederhana, CI4 memiliki struktur modern, mendukung arsitektur MVC, serta cocok digunakan untuk berbagai jenis aplikasi, mulai dari CRUD sederhana hingga API tingkat lanjut.

Panduan ini dirancang untuk membantu pemula memahami dasar CodeIgniter 4 mulai dari instalasi hingga pembuatan fitur sederhana.

1. Apa Itu CodeIgniter 4?

CodeIgniter 4 adalah versi terbaru dari framework CodeIgniter yang dirancang ulang agar lebih modern. Dibangun dengan standar PHP 7/8, mendukung PSR, dan menggunakan struktur directory yang lebih terorganisir.

Fitur Utama CI4

  • Lightweight & high performance
  • Arsitektur MVC
  • Routing modern
  • Built-in security (CSRF, XSS, Filters)
  • Query Builder & ORM-like model
  • Support CLI (spark)

2. Persyaratan Sebelum Menggunakan CI4

Sebelum mulai, pastikan sudah menginstal:
  • PHP 7.4 atau lebih baru, Composer,
  • Ekstensi PHP: intl, mbstring, json, xml, 
  • Web Server: Apache / Nginx (opsional jika pakai PHP development server)

3. Cara Install CodeIgniter 4

Install via Composer (Rekomendasi):


  composer create-project codeigniter4/appstarter ci4-app
  

Masuk ke folder:


  cd ci4-app

Jalankan development server:


  php spark serve

Buka browser:
http://localhost:8080

4. Struktur Folder CodeIgniter 4

CI4 memiliki struktur aplikasi seperti berikut:


  app/           → Folder utama aplikasi
  public/        → Akar public, tempat index.php
  app/Controllers → Menyimpan controller
  app/Models       → Model database
  app/Views        → Template View
  writable/       → Cache, logs, uploads

5. Memahami Konsep MVC di CI4

Model (M) => berhubungan dengan database.

View (V)  => menampilkan halaman html.

Controller (C)  => penghubung antara model dan view.

6. Membuat Controller Pertama

Buat file:
app/Controllers/Home.php


  <?php
  
  namespace App\Controllers;
  
  class Home extends BaseController{
     public function index(){
       return 'Hello dari CodeIgniter 4!';
     }
  }

Tambahkan routing di app/Config/Routes.php:


  <?php
  
  use CodeIgniter\Router\RouteCollection;
  /**
  *@var RouteCollection $routes
  */
  
  $routes->get('/','Home::index');

7. Membuat View Sederhana

Buat file:
app/Views/welcome.php


  <h1>Halo, Selamat Datang di CI4!</h1>
 

Gunakan view pada controller:


  <?php
  
  namespace App\Controllers;
  
  class Home extends BaseController{
    public function index(){
      return view('welcome');
    }
  }

8. Keamanan di CodeIgniter 4

CI4 menyediakan beberapa fitur:

  • CSRF protection

  • XSS filtering

  • Password hashing (Password::hash)

  • Filters (auth, rate limit, dll.)

 

Kesimpulan

CodeIgniter 4 adalah framework yang ideal untuk pemula maupun profesional. Dengan struktur MVC, CLI tools, dan fitur keamanan bawaan, CI4 memudahkan pembuatan aplikasi modern dengan cepat.

untuk melihat artikel yang berhubungan dengan Codeigniter 3 atau 4, bisa cek disini 

 


Saturday, 15 November 2025

Cara handle error 404 page not found pada Express JS

 


Memahami Handler 404 pada Express.js: Fungsi, Cara Kerja, dan Implementasi Terbaik

Dalam pengembangan aplikasi web menggunakan Express.js, salah satu hal penting yang harus diperhatikan adalah bagaimana menangani permintaan (request) yang tidak ditemukan atau tidak memiliki rute yang sesuai. Dalam konteks HTTP, kondisi ini dikenal sebagai 404 Not Found. Untuk memastikan pengalaman pengguna tetap baik dan aplikasi tetap mudah dipelihara, Express menyediakan mekanisme yang sederhana namun fleksibel untuk mengatur handler khusus guna menangani kasus 404.

Apa Itu Handler 404?

Handler 404 adalah sebuah middleware dalam Express.js yang dieksekusi ketika tidak ada rute atau middleware lain yang cocok dengan permintaan yang diterima. Dengan kata lain, jika pengguna mencoba mengakses URL yang tidak didefinisikan dalam aplikasi, maka Express akan menjalankan handler ini.

Secara default, Express tidak mengembalikan halaman 404 yang ramah pengguna. Jika Anda tidak mendefinisikan handler 404 secara manual, respon yang dikirimkan akan cukup sederhana dan tidak informatif. Oleh karena itu, membuat handler 404 khusus sangat disarankan, baik untuk tujuan UX maupun debugging.

 

Cara Kerja Handler 404 di Express.js

Express menggunakan urutan middleware berdasarkan urutan deklarasi dalam kode. Ketika sebuah request datang, Express akan mencocokkannya dengan middleware atau rute dari atas ke bawah.

Jika tidak ada yang cocok, pada akhir tumpukan (middleware stack), kita bisa menambahkan sebuah middleware untuk menangani 404. Karena middleware ini ditempatkan paling akhir, dia hanya akan dijalankan jika semua rute sebelumnya gagal menangani request.

Contoh Implementasi Handler 404

Berikut implementasi sederhana handler 404 dalam Express:


  const express = require('express');
  const app = express();
  
  // Contoh rute
  app.get('/', (req,res)=>{
    res.send('Halaman Utama');
  });
  
  // Handler 404 (ditempatkan di paling akhir)
  app.use((req,res)=>{
    res.status(404).send('404 - Halaman tidak ditemukan');
  });
  
  app.listen(3000, ()=>console.log('Server berjalan pada port 3000'));

Pada contoh di atas, Express akan mencoba mencocokkan request ke rute yang tersedia. Jika tidak ada yang cocok, middleware app.use((req, res) => {...}) akan dieksekusi otomatis.

Handler 404 dengan Tampilan Lebih Menarik

Biasanya, aplikasi produksi membutuhkan tampilan 404 yang lebih profesional. Express bisa dikombinasikan dengan template engine seperti EJS, Pug, atau Handlebars:


  app.use((req,res)=>{
    res.status(404).render('404', {
      title: 'Halaman Tidak Ditemukan',
      message:'Maaf, halaman yang Anda cari tidak tersedia.'
    });
  });

Dengan demikian, pengguna mendapatkan pengalaman yang lebih baik dan tampak lebih profesional.

Perbedaan Handler 404 dan Error Handler Lainnya

Penting untuk membedakan handler 404 dengan handler error (500 atau error lainnya). Dalam Express, error handler memiliki empat parameter:


  app.use((err,req,res,next)=>{
    res.status(500).send('Terjadi kesalahan pada server');
  });

Sedangkan handler 404 tidak memerlukan parameter err karena dijalankan saat tidak ada kesalahan internal—hanya rute yang tidak ditemukan.

Best Practice dalam Membuat Handler 404

  1. Selalu letakkan di bagian paling akhir
    Jika ditaruh di tengah, Express tidak akan bisa memproses rute di bawahnya.

  2. Berikan pesan yang jelas dan ramah pengguna
    Jangan hanya menampilkan teks polos seperti "404", tetapi berikan informasi yang cukup.

  3. Gunakan template engine atau file HTML khusus
    Ini meningkatkan profesionalitas tampilan aplikasi.

  4. Catat request 404 pada log
    Log 404 bisa membantu mendeteksi link rusak, kesalahan pengguna, atau potensi percobaan eksploitasi.

  5. Sediakan opsi untuk kembali ke halaman utama
    Tambahkan tombol atau link “Kembali ke Beranda”.

 

Kesimpulan

Handler 404 merupakan komponen penting dalam aplikasi Express.js untuk menangani permintaan yang tidak memiliki rute yang valid. Dengan memasang middleware khusus ini di bagian paling akhir alur middleware, Anda dapat memastikan aplikasi tetap terstruktur, ramah pengguna, dan mudah dikelola. Implementasi handler 404 yang baik bukan hanya meningkatkan pengalaman pengguna, tetapi juga membantu dalam pemeliharaan aplikasi jangka panjang.

Thursday, 13 November 2025

Membuat middleware sederhana dengan Express JS


 

Dalam pengembangan aplikasi backend menggunakan Node.js, Express.js menjadi salah satu framework yang paling populer karena kesederhanaan dan fleksibilitasnya. Salah satu fitur paling penting dalam Express adalah middleware. Dengan memahami konsep middleware, kita dapat mengontrol alur request–response, melakukan validasi, logging, autentikasi, dan berbagai fungsi lainnya dengan cara yang lebih terstruktur. Pada artikel ini, kita akan membahas apa itu middleware, bagaimana cara membuatnya, dan contoh penerapannya pada aplikasi Express.js sederhana.

 

Apa Itu Middleware?

Secara sederhana, middleware adalah fungsi yang dieksekusi di antara request dari client dan response yang akan dikirimkan server. Middleware dapat memodifikasi objek request (req) dan response (res), menjalankan logika tertentu, atau menghentikan proses sebelum mencapai handler utama. Setiap middleware memiliki parameter standar:

  • req: objek yang berisi informasi request.

  • res: objek untuk mengirimkan response.

  • next: fungsi yang dipanggil untuk melanjutkan ke middleware berikutnya.

Struktur dasarnya seperti ini:

 


  function middleware(req,res,next){
    // logika middleware
    next();
    // melanjutkan ke middleware berikutnya
  }

Ketika next() tidak dipanggil, maka request akan berhenti di middleware tersebut. Hal ini berguna jika kita ingin memblokir akses atau mengirimkan response langsung dari middleware.

 

Persiapan Project Express

Sebelum membuat middleware, mari siapkan project Express.js sederhana. Jalankan perintah berikut pada lokasi project kalian:


npm init -y


npm install express

Lalu buat file server.js


  const express = require('express');
  const app = express();
  const port = 3000;

Membuat Middleware Logging Sederhana

Salah satu contoh middleware yang umum dipakai adalah middleware logging. Tujuannya adalah mencatat setiap request yang masuk, lengkap dengan method, URL, dan waktu aksesnya.

Contohnya:


  const logger = (req,res,next)=>{
    const time = new Date().toLocaleString();
    console.log('ini middleware logger');
    console.log([${time}]${req.method}${req.url});
    next();
  };

Middleware ini memudahkan developer melihat aktivitas request pada server dan sangat berguna untuk debugging maupun monitoring.

Untuk menggunakannya, cukup daftarkan di Express: 


  app.use(logger);

Setiap request menuju endpoint mana pun akan melalui middleware logger terlebih dahulu.

Menambahkan Route untuk Pengujian

Tambahkan route sederhana agar kita bisa melihat middleware bekerja:


  app.get('/', (req,res)=>{
    res.send('Halo, ini homepage!');
  });

Kemudian jalankan server:


  app.listen(port, ()=>{
    console.log(`Server berjalan di http://localhost:${port}`);
  });

Buka terminal arahkan ke route project kalian tersimpan, lalu ketikan "node server.js" tanpa tanda kutip,

Saat mengakses http://localhost:3000/, console akan menampilkan log seperti:


  Server berjalan di http://localhost:3000
  ini middleware logger
  [11/14/2025,9:46:58AM]GET/

Middleware dengan Parameter (Dynamic Middleware)

Middleware juga bisa dibuat lebih fleksibel dengan parameter tambahan. Misalnya, kita membuat middleware untuk mengecek API key:


  const checkApiKey = (key)=>{
    const oriKey = '123';
    return(req,res,next)=>{
      if(oriKey === key) {
        next();
      }else{
        console.log(req.query);
        res.status(401).send('API Key salah! ');
      }
    };
  };

Penggunaan:


  app.get('/secure',checkApiKey('123'), (req,res)=>{
    res.send('Akses berhasil!');
  });

Middleware seperti ini sangat berguna dalam implementasi autentikasi, pembatasan akses, ataupun proteksi endpoint tertentu.

Kesimpulan

Middleware adalah salah satu pilar utama dalam arsitektur Express.js. Dengan memahaminya, kita dapat membangun aplikasi yang lebih terstruktur, aman, dan mudah dikelola. Middleware memungkinkan kita menambahkan fungsi seperti logging, validasi, autentikasi, hingga error handling tanpa harus mengotori kode utama pada route handler.

 

Sunday, 21 June 2020

Codeigniter 4 CRUD Sederhana Menggunakan model

Pada kesempatan kali ini kita akan belajar membuat program CRUD sederhana Codeigniter 4 menggunakan Model. Codeigniter 4 adalah versi terbaru dan dari codeigniter, dan tentunya banyak perubahan terutama dibagian system dan penulisan codenya. Meskipun berbeda dengan versi sebelumnya yaitu versi codeigniter 3, CI4 alur systemnya bisa dibilang sama dengan CI4 khusus yang berhubungan dengan Model, Views dan Controller.

Tanpa banyak embel-embel pembukaan langsung saja kita praktekan contoh program crud sederhananya.

1. INFORMASI
Sebelum memulai pastikan kalian perhatikan ini:
- PHP minimal versi 7.2
- Install Composer (untuk install CI4 lewat Composer)
- Text Editor (Terserah pake apa aja yang penting happy)

2. INSTALASI CI4
Silahkan pilih salah satu:
      a. Menggunakan composer
       - Silahkan download dulu composernya
       - install composer
       - buka ComandPromt atau CMD, dan ketikan composer, jika muncul seperti ini
          maka kalian berhasil instalasi composer
        - masih di CMD atau Command Promt, silahkan ubah direktori kalian, misal ubah ke C
         - dan ketikan kode berikut, composer create-project codeigniter4/appstarter my-ci --no-dev 
           my-ci adalah nama project yang dibuat.(bebas untuk nama project).


         - masuk ke project cd my-ci dan ketikan php spark serve 
         - Buka browser dan ketikan localhost:8080

      b. Tanpa Composer / Manual
        - Download CI4 (rar)
        - extract hasil download tadi
        - ubah nama folder manjadi my-ci (bebas nama folder)
        - buka Command Prompt, masuk ke folder project tadi, dan ketikan php spark serve 
          dan buka browser localhost:8080 hasilnya sama saja

** Lokasi Folder project CI4 bebas dimana saja jika menjalankanya menggunakan php spark serve, tetapi jika ingin menjalankanya manual menggukana XAMPP maka harus diletakkan di dalam htdocs.

3. Buat Database (saya anggap teman-teman sudah bisa membuat database dan table).
    misal nama tabelnya mhs.

4. Buat Controller (misal Mhs.php)

Baris 18-21, melakukan validasi apakah benar diisi formnya atau tidak. kasus ini formnya harus diisi jika tidak maka akan ada pemberitahuan form harus diisi(dalam bahasa inggris).
Baris 22, Cek validasi jik ada yang terdeteksi maka ada pemberitahuan bahwasanya form harus diisi

5. Buat Model (misal Mhs_m.php)
Baris 6-8, wajib dibuat(jika tidak menggunakan query buildier),
Baris 8, daftar kolom tabel database yang harus diisi. Contoh, misah kalian buat $allowedFields = ['nis','jk'] kemudian kalian buat perintah query untuk menyimpan nim, nama dan jk. karna nilai $alloweFileds tidak ada 'nama', maka kolom nama akan kosong meskipun form kalian mengisikan nama.

6. Buat View
    Silahkan teman-teman buat folder mhs di view, kemudian buat file dilamnya

    a. file index.php


    b. file create.php


    c. file edit.php


Kurang lebih seperti itu tutorial mengenai CRUD Sederhana Codeigniter 4 Menggunakan Model, untuk tutorial selanjutnya tanpa menggunakan model, silahkan tunggu update selanjutnya.

Tutorial ini sangat-sangat sederhana dan cocok untuk pemula, dan semoga bermanfaat.

Jika ada yang dipertanyakan silahkan isi kolom komentar dibawah...

Terimakasih sudah mampir.... jangan lupa mampir lagi yaa.....

Tuesday, 3 December 2019

Install React Native to Windows 10

Sumber : https://miro.medium.com/max/820/1*1MWkosYugNk7bLLfRHtEfQ.jpeg

Alhamdulillah setelah sekian lama tidak update artikel, ahirnya bisa update kembali. Apa kabar kalian semua ? semoga dalam keadaan sehat dan di mudahkan dalam mencari rizki.

Pada kesempatan kali ini saya akan membahas bagaimana melakukan instalasi React-Native pada Windows 10. React-native itu sendiri merupakan library besutan Facebook untuk membangun aplikasi mobile Android maupun IOS. Selain itu, dengan menggunakan React-Native kita bisa membangun aplikasi mobile dengan mudah.

A. Instalasi

Ok, langsung saja kita praktekkan bahan apa aja yang dibutuhkan.
1. Install Node.js
2. Install JDK
3. Install Android Studio
 
Ketiga bahan diatas bisa kalian dapatkan pada situs resmi masing-masing.
 
*Pada kasus ini saya menggunakan Windows 10.
 
*Instalasi React-native tanpa Expo. 

*Khusus Android Studio, yang kita butuhkan hanya SDK nya saja, sebernarnya tidak harus install Android Studio cukup download SDK nya saja. Kenapa harus instaall Android Studio..??? maksud saya agar lebih mudah ketika melakukan update SDK jika ada versi yang baru, jadi alangkah baiknya kalian install saja Android Studio.
 
*Tapi harus diperhatikan ketika malakukan instalasi Android Studio, pada bagian lokasi PATH SDK nya, usahakan lokasinya jangan di direktori C, karena size SDK nanti bisa sampai puluhan GB..
*Versi bahan-bahan yang saya gunakan
1. Node Js =>  10.16.0 (bisa pakai yang terbaru)
2. JDK => 8u131 (bisa pakai yang terbaru)
3. Android Studio => 2.3.3 (bisa pakai yang terbaru)
4. React-Native => Sesuai selera kalian (bisa pakai yang terbaru)

B. Setting Variabel

Jika sudah selesai melakukan instalasi bahan-bahan diatas, selanjutnya kita akan melakukan konfigurasi Variabel. Silahkan kalian ketikan env/environment pada pencarian windows 10, dan klik Edit the system environment variables.
Akan muncul tampilan seperti berikut, klik environment variables.
Pada tampilan berikut kita fokus pada bagian User Variables.


Selanjutnya klik new pada bagian User Variables,
1. Variabel name : ANDROID_HOME,  Variable Value: *lokasi sdk kalian
2. Variable name : JAVA_HOME, Variable Value: *lokasi JDK kalian

Selanjutnya ke bagian  System Variables.
.
Cari variable Path kemudian klik 1 kali, lalu klik tombol edit.
kemudian klik new, dan ketikan alamat 'lokasi sdk kalian/platform-tools' dan klik Ok.

C. Instalasis React-Native

1. Buka Comand Promt kalian, kemudian ketikan ini
npm install -g react-native-cli
tunggu sampai selesai. 
 
2. Selanjutnya silahkan kalian buat folder khusus untuk project React-native kalian, untuk lokasinya bebas dimana saja.
3. Kembali ke Comand Promt, kemudian arahkan root direktori ke project React-native yang dibuat tadi.
ex : misal projectnya di E:\react-native. Pada Comand promt yang terbuka tadi ketikan E: (E tambahkan titik 2), maka akan berpindah root directori ke E, selanjutnya ketikan 'cd react-native'(tanpa kutip) dan enter, maka kita akan berada dalam folder react-native.
4. Langkah selanjutnya kita akan mendownload project React-native dengan cara.
react-native init nama_project_kalian
atau jika pengen sesuai versi bisa pakai ini
react-native init nama_project_kalian --version x.xx.x
dan tunggu sampai selesai,
5. Jika sudah selesai instalasi, selanjutnya ketikan pada comand promt kalian 'cd nama_project_yang _dibuta_tadi' tanpa kutip (lokasi kita saat ini E:\react-native\project yang di buat tadi).
6. Selanjutnya silahkan hubungkan Smartphone kalian ke laptop/komputer menggunakan kabel USB.
7. Setelah itu ketikan pada Comand Promt
react-native run-android
atau
react-native-run-ios
*penting, untuk pertama kali menjalankan project react-native ke Smarphone biasanya membutuhkan waktu yang sedikit lama karena akan ada yang di download sesuai dengan versi OS Smartphone kalian.
 
Selamat mencoba....

Sekian dulu cara instalasi React-native pada windows 10,
jika ada yang ingin dipertanyakan silahkan isi kolom komentar di bawah.
Semoga bermanfaat....