Belajar CRUD sering kali jadi langkah awal yang penting saat mulai mendalami pemrograman web dengan PHP. Melalui studi kasus aplikasi catatan digital, kamu akan diajak memahami bagaimana data disimpan, ditampilkan, diubah, dan dihapus menggunakan PHP native dan database. Tidak hanya itu, materi ini juga dilengkapi dengan fitur login sederhana agar alur aplikasinya terasa lebih nyata.
Daftar Isi
Pernah nggak sih kamu punya banyak catatan, tapi akhirnya lupa atau hilang entah ke mana? Kadang ditulis di kertas, kadang disimpan di chat, kadang cuma diingat-ingat saja. Akibatnya, catatan jadi berantakan dan susah dicari lagi, padahal isinya penting—baik itu tugas, ide, atau hal kecil yang nggak boleh terlupa.
Lewat seri materi ini, kita akan membuat solusi sederhana dari masalah tersebut, yaitu aplikasi catatan berbasis web. Aplikasi ini dibangun menggunakan HTML, CSS, dan PHP native, dengan data yang disimpan ke dalam database.
Pada seri ini, kamu akan berperan sebagai programmer. Artinya, kita tidak memulai dari ide mentah atau desain kosong. Seperti di dunia kerja nyata, seorang programmer biasanya menerima rancangan sistem dari system analyst serta desain antarmuka dari UI designer sebagai acuan dalam proses pengembangan aplikasi.
Oleh karena itu, pembahasan pada seri ini akan difokuskan pada logika dan pemrograman PHP, sementara proses pembuatan HTML dan CSS tidak dibahas secara detail. Sebagai gantinya, template tampilan dan desain UI telah disiapkan dan dapat langsung digunakan agar kamu bisa lebih fokus memahami alur aplikasi dan implementasi backend.
Pada artikel pertama ini, kita akan membahas rancangan awal aplikasi, mulai dari daftar fitur yang akan dibuat, data yang terlibat, hingga desain UI yang akan menjadi acuan pengembangan pada artikel-artikel berikutnya.
Sebelum masuk ke tahap koding, mari kita pahami dulu gambaran besar aplikasinya.
Memahami fitur dengan use case diagram
Pada awal artikel ini sedikit disinggung tentang permasalahan yang kita akan selesaikan yaitu kita kadang punya banyak catatan yang lupa atau hilang entah kemana karena tidak kita simpan dengan baik. Permasalahan ini yang menjadi awal pemberangkatan dan tujuan kita dalam membuat aplikasi sehingga aplikasi kita akan selalu Tepat Guna meskipun fiturnya sederhana.
Fitur Utama Aplikasi
Berdasarkan permasalahan di atas kita dapat merumuskan beberapa fitur sebagai berikut:
- Mengelola Catatan
Fitur ini merupakan inti dari aplikasi. Pengguna harus dapat:- Menambahkan catatan baru
- Melihat daftar catatan yang tersimpan
- Mengubah isi catatan
- Autentikasi
Fitur ini dibuat untuk mengamankan catatan user, orang lain yang tidak memiliki hak untuk akses tentunya tidak boleh menambahkan apalagi menghapus catatan milik
Use Case Diagram
Fitur-fitur di atas oleh system analyst direpresentasikan secara visual menggunakan use case diagram. Diagram ini membantu kita sebagai programmer untuk memahami:
- Siapa aktor yang terlibat (user)
- Interaksi antara user dan sistem
- Batasan fungsi yang disediakan oleh aplikasi
Perhatikan use case diagram berikut:
Dari diagram di atas kita dapat pahami:
- Terdapat 1 tipe pengguna yang akan memakai aplikasi
- Skenario Autentikasi akan digunakan oleh user
Dalam sistem yang kompleks skenario Autentikasi tidak perlu dituliskan, melainkan hanya ditulis dalam keterangan terpisah saja sebagai prasyarat penggunaan fitur-fitur utama - Skenario Mengelola Catatan akan digunakan oleh user
Memahami data yang diolah
Selain memahami fitur yang akan dibangun, sebagai programmer kita juga perlu mendefinisikan data apa saja yang terlibat dan akan diolah oleh sistem. Data ini nantinya akan menjadi dasar dalam perancangan struktur database dan proses pengolahan data pada aplikasi.
Berdasarkan use case diagram yang telah dibahas sebelumnya, terdapat dua skenario utama dalam aplikasi ini, yaitu Autentikasi dan Mengelola Catatan. Berikut penjabaran data yang terlibat pada masing-masing skenario.
- Autentikasi
Fitur autentikasi digunakan oleh pengguna untuk masuk ke dalam aplikasi serta membatasi akses dari pihak yang tidak berhak. Fitur ini juga umum ditemui pada berbagai aplikasi yang kita gunakan sehari-hari.
Pada implementasi paling sederhana, proses autentikasi dilakukan menggunakan username dan password. Oleh karena itu, data yang terlibat pada fitur ini adalah:- Username
- Password
- Mengelola Catatan
Fitur ini memungkinkan pengguna untuk menambahkan, mengubah, dan menghapus data catatan miliknya sendiri. Agar pembahasan tetap sederhana dan mudah dipahami, kita akan menggunakan beberapa data utama berikut:- Judul Catatan
- Isi Catatan
- Tanggal Pembuatan
Data-data ini sudah cukup untuk merepresentasikan sebuah catatan sederhana dan akan digunakan sebagai dasar dalam proses pengembangan fitur selanjutnya.
Tools dan teknologi yang digunakan
Dalam pengembangan aplikasi, pemilihan tools dan teknologi menjadi hal penting agar aplikasi dapat dibangun secara efektif dan sesuai dengan kebutuhan pengguna. Pada seri ini, aplikasi diasumsikan berjalan melalui web browser agar mudah diakses di berbagai perangkat tanpa perlu instalasi tambahan.
Dengan pendekatan tersebut, aplikasi dikembangkan sebagai aplikasi berbasis website yang terhubung dengan database untuk mengelola dan menyimpan data.
Berikut adalah tools dan teknologi yang akan digunakan dalam pengembangan aplikasi Note App ini.
- Web Browser
Web browser digunakan untuk mengakses dan menguji aplikasi yang dikembangkan. Kamu bebas menggunakan web browser favoritmu, seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge. - Visual Studio Code
Visual Studio Code digunakan sebagai code editor utama dalam penulisan dan pengelolaan source code. Editor ini populer digunakan karena ringan, fleksibel, serta mendukung berbagai ekstensi yang memudahkan proses pengembangan aplikasi web. Kamu bisa download Visual Studio Code dari website resminya https://code.visualstudio.com/download - Laragon Wamp
Untuk menjalankan aplikasi PHP, kita membutuhkan web server (seperti Apache atau Nginx) serta DBMS untuk mengelola database. Kamu bisa baca artikel ini untuk panduan instalasi dan penggunaan Laragon untuk Project PHP. Pada seri ini, kita akan menggunakan Laragon karena:- Mudah digunakan
- Sudah terintegrasi dengan web server dan database
- Cocok untuk kebutuhan development di lingkungan lokal
- Figma
Figma digunakan untuk melihat dan memahami rancangan desain UI aplikasi. Melalui Figma, kamu dapat mempelajari tata letak, komponen, dan alur tampilan aplikasi yang telah disiapkan sebagai acuan dalam proses pengembangan. Figma merupakan salah satu tools desain UI yang paling umum digunakan dalam dunia software development saat ini. Kamu bisa download Figma di website resminya: https://www.figma.com/downloads/
Memahami Desain UI aplikasi Note App
Desain UI aplikasi Note App telah disiapkan sebelumnya menggunakan Figma dan akan digunakan sebagai acuan tampilan selama proses pengembangan aplikasi. Desain ini membantu kita sebagai programmer untuk memahami alur halaman, komponen yang digunakan, serta data yang akan ditampilkan pada setiap fitur.
Pada seri ini, pembuatan HTML dan CSS tidak dibahas secara detail. Template tampilan telah disediakan sehingga pembahasan dapat difokuskan pada logika aplikasi dan pemrograman PHP.
Kamu dapat melihat detail rancangan UI aplikasi melalui link berikut atau melalui cuplikan tampilan yang disertakan di bawah ini.
Penutup
Pada artikel pertama ini, kita telah membahas gambaran awal aplikasi Note App yang akan dikembangkan, mulai dari permasalahan yang ingin diselesaikan, fitur utama aplikasi, data yang terlibat, tools dan teknologi yang digunakan, hingga desain UI yang menjadi acuan pengembangan.
Dengan memahami rancangan aplikasi sejak awal, kamu sebagai programmer diharapkan memiliki gambaran yang jelas mengenai apa yang akan dibangun dan bagaimana alur pengembangannya. Pendekatan ini penting agar proses implementasi di tahap selanjutnya dapat berjalan lebih terarah dan sesuai dengan kebutuhan.
Pada artikel berikutnya, kita akan mulai masuk ke tahap Getting Started, yaitu menyiapkan starter template, melakukan setup environment menggunakan Laragon, serta memastikan aplikasi siap untuk dikembangkan lebih lanjut.
Sampai di sini dulu pembahasan kita.
Mari lanjut ke artikel berikutnya dan konfigurasi projectnya ✨
