Tutorial Codeigniter 4 : Membuat Web Portofolio Lengkap Bag.1 (Seting SB Admin 2)

Tutorial Codeigniter 4 – Sebelum kita install codeigniter 4 dan seting admin SB Admin 2 disini kita install terlebih dahulu install terlebih dahulu peralatan yang perlu dipersiapkan di laptop/PC kita :

1. Teks editor
2. Web browser
3. XAMPP
4. Composer
5. Git
6. SB Admin 2

1.Teks editor

Teks editor adalah aplikasi yang dipakai oleh programmer untuk menyusun kode program sehingga ini menjadi  bagian yang peting sehingga dapat membantu programmer membut kode lebih cepat, disarankan adalah Visual Studio Code karena memiliki berbagai fitur yang banyak, akan tetapi teman-teman bisa menggunakan teks editor kesayangan masing-masing.

2. Web browser

Web browser untuk menampilkan hasil yang telah kita buat disini bisa menggunakan Mozzila Firefox, atau google chrome

3. XAMPP

Webserver disini saya menggunakan XAMPP versi windows dengan versi PHP 7.4 dan Mysql v 5.1, teman-teman yang menggunakan OS selain windows tinggal disesuaikan jangan lupa aktifkan ekstensi ekstention=php_intl.dll di php.ini dengan menghapus tanda ; (titik koma) didepannya pada seting php.ini.

4. Composer

Composer adalah dependency manager pada PHP yang berfungsi sebagai penghubung antara projek PHP kita  dengan library dari luar, dengan composer anda dapat membuat library dan mengambil library dari luar yang terhubung dengan packagist.org, adapun manfaat lainya package yang anda butuhkan saat mengerjakan projeck PHP akan secara otomatis terinstal tanpa harus install secara manual, serta dapat dengan leluasa menggunakan ribuan package yang tersedia di packagist. Maka disarankan teman-teman menginstal Composer.

5. Git

Git adalah version control system yang digunakan developer untuk mengembangkan software secara bersama-sama, sehingga fungsi utama git untuk mengatur versi dari sourcode, menambah checkpoint perubahan kode sehingga mempermudah pengguna untuk mengetahui perubahan apasaja yang dilakukan pada source code yang kita buat, disini yang kita butuhkan adalah console gitbash untuk menjalankan berbagai perintah comandline dari codeigniter.

6. SB Admin 2

SB Admin 2 adalah template admin yang akan kita gunakan dengan memiliki berbagai fitur diantarannya yang telah mendukung bootstrap v 4, font awesome v 5, chart.js, datatable dan responsive.

Selanjutnya setelah perangkat yang diperlukan telah tersedia langkah selanjutkan Instal Projek baru Codeigniter 4 disini kita install dengan menggunakan composer,  masuk ke dalam folder httdocs XAMPP dengan Gitbash :

Instal Codeigniter 4 :

1.Jalankan Gitbash di lakukan perintah install codeigniter 4 dengan composer ( composer create-project codeigniter4/appstarter ci-portofolio –no-dev) maka akan download project codeigniter 4 dengan folder nama ci-portofolio dengan tidak menyertakan phpunit sehingga tidak semua dependency akan terinstal hanya dependency standar yang dibutuhkan akan diinstal.

2. Jalankan local development server, masuk ke folder /xampp/htdocs/ci-portofolio ketikan perintah ( php spark serve )

3. Buka browser copy alamat ( http://localhost:8080 ) maka akan tampil seperti berikut :

4. Cari file env kemudian rename dan tambahkan tanda . (titik) menjadi .env CI_ENVIRONMENT aktifkan dan ubah dari production menjadi development agar debugging  akan dihidupkan sehingga apabila terjadi error pada aplikasi akan ditampilkan. Untuk mengaktifkan hilangkan tanda # didepan, dan aktifkan base url

Seting SB Admin 2

Sebagai halaman yang akan mengelola admin, agar teman-teman lebih mudah memahami tampilan gambar utama yang saya tampilkan, untuk koding lebih lengkapnya bisa download source code aplikasi portofolio-ci di akhir tutorial ini :

1.Setelah download SB Admin 2 ekstrak di folder Public

2. Buat controler admin function index dan Seting Routes menuju SB Admin 2 view admin/index

3. Buat View layout yang akan kita gunakan sebagai template, masukan kode html index.html di folder SB Admin vendor, dan kita pisahkan footer, sidebar, template, topbar untuk menjadi template yang akan kita panggil nantinya untuk memanggil template sisipkan perintah berikut :

• <?= $this->renderSection(‘content’); ?> – memanggil lokasi konten utama pada tiap-tiap view
• <?= $this->include(‘layout/sidebar’); ?> – memanggil template pada layout sidebar
•  <?= $this->include(‘layout/topbar’); ?> – memanggil template pada layout topbar
• <?= $this->include(‘layout/footer’); ?> – memanggil template pada layout footer

4. Setelah sebelumnya kita telah membuat controler admin, selanjutnya buat controler, dan kodenya sama dengan controler admin sebelumnya tinggal disesuaikan namanya saja :

• Login
• Portofolio
• Profile
• Register
• Role
• Slider
• User

Controler tersebut nantinya di sesuaikan dengan menu dan fitur yang akan kita gunakan nanti pada saat management admin pada aplikasi yang kita buat.

5. Buat folder pada Views sesuai dengan nama controler tadi dan diisi dengan file index.php pada tiap-tiap folder. diapit dengan :

• <?= $this->extend(‘layout/template’); ?> – memanggil layout template
• <?= $this->section(‘content’); ?> – memanggil layout posisi content pada template utama SB Admin 2.
• <?= $this->endSection(); ?> – ditutup dengan endsection

6. Berikut tampilan SB Admin 2 beserta menu setelah selesai kita seting :

Sebelum melanjutkan ada baiknya teman-teman ikuti tulisan menarik sebelumnya :

• Instal dan persiapan belajar Codeigniter 4
• Perintah Dasar Git yang Wajib Diketahui
• Menampilkan pesan alert dengan Javascript

Terima kasih sudah membaca tutorial ini sampai selesai, semoga bermanfaat, untuk lebih lengkapnya teman-teman dapat download source code tutorial ini,pada link dibawah ini ;

Download Source Code

Untuk tutorial berikutnya ( Tutorial Codeigniter 4 : Konsep Dasar CI4 Yang Penting Untuk Diketahui ) kita akan lanjutkan dengan menggunakan database pada controler Profile sehingga dapat dengan mudah mengelola data pada modul Profile, di tunggu ya teman-teman 🙂 sampai jumpa pada tutorial berikutnya.