CodeIgniter4: Project Pertama dan Bekerja dengan Git dan GitHub

5 minute read

Published: March 13, 2026

Git adalah sistem kontrol versi terdistribusi yang digunakan untuk melacak perubahan dalam kode sumber selama pengembangan perangkat lunak. GitHub adalah platform hosting repositori Git berbasis web yang memungkinkan pengembang untuk menyimpan, mengelola, dan berbagi kode mereka.

Memahami sistem Version Control sangat krusial bagi kolaborasi tim dan tata kelola kode yang baik. Dalam modul ini, kita akan membahas secara lengkap tentang pengenalan, konfigurasi, pembuatan repository, hingga bagaimana bekerja secara efektif menggunakan branch dan remote repository dengan Git.

1. Mengenal Git dan GitHub

Version Control System (VCS) adalah sistem yang merekam perubahan pada sebuah file atau kumpulan file dari waktu ke waktu sehingga Anda dapat melacak kembali versi spesifik di kemudian hari.

Git: Sistem kontrol versi yang dapat dijalankan secara lokal di komputer kita. Beberapa kelebihan Git antara lain efisien, cepat, dan memungkinkan manajemen alur kerja yang fleksibel (distributed version control).
GitHub: Merupakan layanan penyimpanan (hosting) Git berbasis web. Ia menambahkan antarmuka ramah pengguna (GUI) dan ragam fitur kolaborasi.

Dengan Git dan GitHub, kita dapat menghindari pengelolaan file manual yang memakan waktu (seperti pembuatan nama file revisi1, revisi_final, dsb).

2. Konfigurasi Awal Git

Sebelum memulai, kita harus melakukan setup identitas. Git menggunakan informasi nama dan email ini pada setiap karya baris kode (commit) Anda:

git config --global user.name "NamaKamu"
git config --global user.email contoh@gmail.com

Untuk memverifikasi pengaturan Anda, gunakan:

git config --list

(Catatan: Sebaiknya gunakan *email yang sama dengan akun GitHub/GitLab Anda agar dapat teregistrasi dengan baik di sistem).*

3. Tugas Dasar Repositori

Repositori adalah folder project Anda yang dilacak oleh Git. Tersedia dua jenis tindakan awal terhadap repositori:

A. Inisialisasi Repositori Baru

Buat folder baru untuk project dan masuk ke direktori tersebut:
```
mkdir nama-repositori
cd nama-repositori
```
Lakukan inisialisasi awal repositori Git kosong. Ini akan memunculkan subdirektori tersembunyi bernama .git:
```
git init
```
Tambahkan file ke dalam Staging Area Git agar diawasi perubahannya (Anda juga bisa menggunakan tanda . untuk memasukkan semua file terbaru sekaligus):
```
git add nama-file
git add .
```
Rekam hasil modifikasinya beserta pesan informasional menggunakan commit. Commit adalah cara untuk merekam snapshot dari proyek:
```
git commit -m "Pesan commit pertama"
```

B. Mengkloning Repositori

Jika Anda ingin menduplikasi atau berkontribusi pada project yang sudah ada (remote server), Anda dapat menyalin (clone) ke direktori lokal Anda:

git clone https://github.com/username/repository-name.git
cd repository-name

Contohnya:

git clone https://github.com/irchamali/calculator.git
cd calculator

4. Konsep Branching (Percabangan)

Branch / cabang merupakan serangkaian perubahan yang terpisah. Branch berguna untuk bereksperimen dengan fitur atau eksperimen baru, sehingga tidak mengganggu kinerja sistem utama (main/master branch).

Melihat branch dan membuat baru:
```
git branch
git branch nama-branch-baru
```
Berpindah antar branch: Kita dapat menggunakan checkout (versi klasik) atau switch (kemudahan di versi terbaru):
```
git checkout nama-branch-baru
# atau
git switch nama-branch-baru
```
Penyatuan (Merge): Setelah selesai bekerja di branch cadangan, Anda mungkin ingin menyatukannya kembali ke jalur utama (main). Pastikan Anda berpindah ke branch utama terlebih dulu kemudian lakukan merge:
```
git checkout main
git merge nama-branch-baru
```

5. Bekerja dengan Remote Repository

Remote repository adalah repositori yang berada di server atau layanan hosting (seperti Github) sehingga proyek tersebut bisa diakses darimana saja.

Menambahkan alamat Github Anda (Linking): Setelah membuat proyek kosong via Web Github, Anda perlu menautkannya ke lokal:
```
git remote add origin https://github.com/username/nama-repositori.git
```
Mengambil perubahan dari Cloud (Fetch/Pull): Apabila rekan satu tim (atau kolaborator) melakukan update di remote, Anda harus mensinkronkan versi ke komputer lokal Anda:
```
git fetch origin
git merge origin/main
```
Mengirim (Push) kode Anda: Setelah selesai dengan fitur baru dan yakin dengan commit yang Anda rekam secara lokal, Anda dapat melontarkannya ke cloud (Github):
```
git push origin main
```

6. Membuat Project Pertama CodeIgniter4: Calculator

Setelah memahami dasar Git, mari kita terapkan pada project1 atau Project CodeIgniter 4 yang telah kita install pada pertemuan sebelumnya. Kita akan membuat sebuah proyek kalkulator (komputasi sederhana) yang mengadopsi struktur MVC dasar, di mana Controller akan menangani operasi aritmatika dan View akan merender form serta hasil akhirnya. Pertama kloning repositori (https://github.com/irchamali/calculator.git) ke komputer lokal Anda. Kemudian masuk ke dalam direktori hasil kloning:

git clone https://github.com/irchamali/calculator.git
cd calculator

terdapat 3 file didalamnya yaitu .html, .js, dan .css. Kita akan memindahkan file-file tersebut ke dalam struktur CodeIgniter 4. File .html akan kita pindahkan ke folder app/Views/v_calculator.php. Buat folder assets di dalam folder public/, lalu file .js dan .css akan kita pindahkan ke folder public/assets/.

A. Membuat Controller

Pertama, kita siapkan pusat kendalinya. Buat sebuah file baru di folder app/Controllers/Calculator.php:

<?php

namespace App\Controllers;

class Calculator extends BaseController
{
    public function index()
    {
        return view('v_calculator');
    }
}

B. Membuat View

Sekarang buat tampilan antarmukanya di bagian Views. Buatlah file v_calculator.php pada folder app/Views/. Kita akan memindahkan kode yang ada di file .html ke dalam folder app/Views/v_calculator.php. Berikut adalah kode yang akan kita gunakan:

<!DOCTYPE html>
<html>
<head>
    <title>Kalkulator Sederhana</title>
    <link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendValue('/')">/</button>
            <button onclick="appendValue('*')">*</button>
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button onclick="appendValue('-')">-</button>
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button onclick="appendValue('+')">+</button>
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button onclick="appendValue('.')">.</button>
            <button onclick="appendValue('0')">0</button>
            <button onclick="calculate()">=</button>
        </div>
    </div>
    <script src="assets/script.js"></script>
</body>
</html>

C. Mengatur Routes

Agar sistem membaca Controller Calculator saat suatu URL diakses, kita sesuaikan file Routes pada app/Config/Routes.php:

$routes->get('/calculator', 'Calculator::index');

Terakhir, nyalakan layar Development Server menggunakan perintah php spark serve, lalu buka browser Anda menuju tautan http://localhost:8080/calculator. Selamat! Kalkulator sederhana Anda sudah berhasil terimplementasi secara komprehensif memakai kerangka basis MVC dari CodeIgniter 4.

Share on

Facebook LinkedIn X (formerly Twitter)

Ircham Ali