Struktur folder dalam sebuah aplikasi web sangat penting karena mempengaruhi efisiensi pengembangan, keteraturan, dan kemudahan pemeliharaan aplikasi. Struktur folder yang baik juga memudahkan kolaborasi dan pengembangan bersama antara tim pengembang. Struktur folder memiliki pola yang banyak digunakan dalam pengembangan web, pola tersebut adalah:

1. Struktur Layer

Struktur lapisan adalah pola umum yang digunakan dalam banyak kerangka kerja web modern, seperti Angular, React, dan Vue.js. Dengan struktur ini, kode aplikasi dibagi menjadi beberapa level, seperti tampilan, logika aplikasi, dan akses data, dan setiap lapisan ditempatkan di folder masing-masing.

 

Dengan struktur lapisan ini, pengembangan aplikasi web dapat dilakukan dengan lebih terstruktur dan terorganisir, sehingga memudahkan pengembang untuk mengelola kode aplikasi dan mempermudah pemeliharaan aplikasi pada masa yang akan datang.

 

2. Struktur Fitur

Struktur fitur mengorganisir kode aplikasi ke dalam modul-fitur, di mana setiap modul berisi semua kode terkait dengan fitur khusus dari aplikasi. Struktur ini sering digunakan dalam aplikasi berskala besar dengan banyak fitur dan logika bisnis yang kompleks.

 

Dengan struktur ini, pengembangan aplikasi web dapat dilakukan dengan lebih terfokus dan terstruktur, sehingga memudahkan pengembang untuk mengelola kode aplikasi secara efisien dan efektif. Hal ini juga dapat mempermudah pemeliharaan aplikasi pada masa yang akan datang.

 

3. Struktur Hybrid

Struktur hybrid adalah gabungan dari struktur layer dan fitur. Struktur ini menggabungkan keuntungan dari kedua pola tersebut, memberikan struktur kode yang terorganisir dengan baik yang dapat mudah menampung proyek-proyek kecil maupun besar.

 

Dengan struktur ini, pengembangan aplikasi web dapat dilakukan dengan lebih fleksibel dan dapat disesuaikan dengan kebutuhan proyek. Hal ini memudahkan pengembang untuk mengelola kode aplikasi dengan lebih efektif dan efisien, serta dapat mempercepat proses pengembangan aplikasi secara keseluruhan.

Pada saat mengembangkan sebuah web application, struktur folder yang dibuat harus dipertimbangkan secara matang untuk mempermudah dalam pengembangan dan pemeliharaan kode. Selain itu, pemilihan teknologi web juga harus diperhatikan untuk mendukung fungsionalitas web application yang diinginkan. Berikut adalah beberapa teknologi web yang biasanya digunakan dalam pengembangan struktur folder web application:

1. HTML dan CSS: HTML dan CSS digunakan untuk membuat tampilan visual dari web application. HTML digunakan untuk membuat struktur halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari elemen-elemen HTML.
2. JavaScript: JavaScript digunakan untuk membuat interaksi pada halaman web, seperti menampilkan pesan atau melakukan validasi data pada form.
3. Framework frontend: Framework frontend seperti React, Angular, dan Vue.js digunakan untuk mempercepat pengembangan web application dengan menyediakan fitur-fitur yang sudah siap pakai, seperti routing, state management, dan component-based development.
4. Framework backend: Framework backend seperti Express, Laravel, dan Ruby on Rails digunakan untuk mempercepat pengembangan fitur-fitur backend, seperti REST API, autentikasi, dan manajemen database.
5. Database: Database seperti MySQL, PostgreSQL, MongoDB digunakan untuk menyimpan dan mengelola data yang diperlukan oleh web application.
6. Server: Server seperti Apache, Nginx, dan Node.js digunakan untuk menangani permintaan dari client dan mengirimkan respons yang diperlukan.

Setelah mengerti pola dari struktur folder, selanjutnya kita dapat membagi file yang tepat ke dalam folder yang benar untuk membantu mengatur kode kalian. Hal ini sangat penting untuk membantu kalian dalam pengembangan web. Ada beberapa nama folder yang digunakan saat kalian akan membangun proyek web.

1. Asset

Folder asset berisi semua gambar, ikon, file css, file font, dan sebagainya yang akan digunakan dalam aplikasi web kalian. Gambar kustom, ikon, dan font berbayar ditempatkan di dalam folder ini.

2. Component

Folder komponen adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk membangun berbagai komponen yang diperlukan dalam suatu halaman web. Komponen bisa berupa tombol, input form, kotak teks, dan lain-lain. Folder komponen ini sangat berguna untuk memisahkan logika kode dari tampilan halaman web, sehingga memudahkan pengembang untuk mengelola dan memperbarui kode.

3. Modules

Folder Modules adalah tempat penyimpanan kode-kode yang memecah aplikasi menjadi modul-modul yang terpisah secara fungsional dan dapat digunakan kembali. Modul-modul ini dapat dipikirkan sebagai "blok bangunan" dari aplikasi web, yang dapat digabungkan untuk membangun berbagai fitur. Folder Modules sangat berguna untuk aplikasi yang kompleks karena memungkinkan pengembang untuk mengatur kode menjadi kelompok-kelompok yang logis dan terpisah, sehingga mempermudah pengujian, perawatan, dan pengembangan. Dengan cara ini, penggunaan folder Modules juga dapat mempercepat waktu pengembangan aplikasi karena memungkinkan pengembang untuk menghindari menulis ulang kode yang sama dan mempercepat proses integrasi modul yang sudah ada.

4. Features

Folder fitur adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk membangun fitur-fitur spesifik pada suatu aplikasi web. Fitur-fitur ini bisa berupa fitur pencarian, fitur login, fitur pembayaran, dan lain-lain. Folder fitur sangat berguna untuk memisahkan kode berdasarkan fungsionalitas, sehingga memudahkan pengembang untuk mengelola dan memperbarui kode.

5. Public

Folder publik adalah folder khusus di dalam pengembangan web yang berisi semua file publik yang dapat diakses oleh pengguna. File-file ini bisa berupa gambar, video, dokumen, dan lain-lain yang ingin ditampilkan di halaman web. Folder publik sangat berguna karena memudahkan pengembang untuk menyimpan file-file publik secara teratur dan mudah diakses.

6. Models

Folder Model adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk mengelola data pada suatu aplikasi web. Kode-kode ini digunakan untuk memetakan struktur data dan memfasilitasi interaksi antara data dan aplikasi.

7. View

Folder View adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk menghasilkan tampilan visual pada suatu aplikasi web. Kode-kode ini berisi instruksi-instruksi tentang bagaimana tampilan halaman web harus ditampilkan kepada pengguna.

8. Controller

Folder Controller adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk mengatur interaksi antara user interface (UI) dan backend aplikasi. Kode-kode ini berfungsi untuk mengontrol alur data yang masuk dan keluar dari aplikasi, dan memastikan bahwa UI merespons secara tepat terhadap aksi pengguna.

9. Config

Folder Config adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk konfigurasi aplikasi web. Kode-kode ini berisi pengaturan-pengaturan dasar untuk menjalankan aplikasi web, seperti pengaturan database, konfigurasi server, dan pengaturan lingkungan pengembangan.

10. Routes

Folder Routes adalah folder khusus di dalam pengembangan web yang berisi kode-kode untuk mengatur rute atau jalur navigasi di dalam aplikasi web. Kode-kode ini menentukan bagaimana pengguna dapat berpindah halaman atau tampilan di dalam aplikasi web, serta menentukan bagaimana aplikasi merespons permintaan dari pengguna.

11. Utils

Folder Utils adalah folder khusus di dalam pengembangan web yang berisi kode-kode yang digunakan untuk mempermudah pengembangan aplikasi web. Kode-kode ini berisi fungsi-fungsi umum yang dapat digunakan di berbagai bagian dari aplikasi web, seperti fungsi untuk memformat tanggal, mengambil data dari server, atau memvalidasi input pengguna.

12. Service

Folder Service adalah tempat penyimpanan kode-kode yang berkaitan dengan koneksi ke sumber daya luar seperti server, database, atau layanan API. Dengan cara ini, kode menjadi lebih mudah dikelola, diuji, dan digunakan kembali di berbagai bagian aplikasi web.

13. Source

Folder "src" (singkatan dari "source") dalam pengembangan web digunakan untuk menyimpan seluruh kode sumber (source code) dari aplikasi web. Di dalam folder "src", terdapat subfolder-subfolder seperti "components", "pages", "assets", "utils", "services", dan sebagainya yang digunakan untuk mengorganisasi kode sumber aplikasi web. Folder "src" juga seringkali menjadi titik awal atau entry point bagi pengembang web untuk memulai pengembangan aplikasi web, karena di dalamnya terdapat file utama seperti "index.js" atau "App.js".

 

 

Tugas: Buatlah susunan folder seperti gambar dibawah

 

Folder Structure for Modern Web Applications - DEV Community

Best Folder structure for modern Web Application | by Devwares | Apr, 2023 | Medium