JNATIA Volume 1, Nomor 1, November 2022

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Perancangan Aplikasi Crowdfunding Berbabsis Website

Putu Vidi Nararia Ningrata1, Made Agung Raharja, S.Si., M.Cs.a2

aInformatics Departement, Udayana University

Bali, Indonesia

1vidinararia@gmail.com

2made.agung@unud.ac.id

Abstract

In this modern era many technology have been created to help human do their work. One of them is Crowdfunding, where is this app or website that can funding easily. Crowdfunding make it easy for businessman that really need funds for theire business while development. User can also giving funds to various project that being development by businessman. This Crowdfunding sites create by JavaScript Framework with Database from GraphQl.

Keywords: Crowdfunding, Money, React.Js, GraphQl, JavaScript Framework

  • 1.    Introduction

Pada masa era digital ini semuanya dilakukan secara online atau daring, seperti contohnya memesan makanan, pembayaran tagihan, dan masih banyak lagi. Di masa pandemi covid yang terjadi di tahun 2019 ini telah menyebabkan kewaspadaan seluruh orang – orang akan virus covid ini. Salah satunya dengan tidak bersentuhan fisik atau bersentuhan ke benda di tempat umum. Kewaspadaan tersebut menyebabkan banyak orang untuk lebih sering diam di rumah untuk melakukan kegiatan mereka seperti bekerja dari rumah dan berbelanja dari rumah. Banyak orang – orang untuk membuat pekerjaan yang bisa di kerjakan dari rumah namun perlu membutuhkan dana untuk membangun usaha mereka. Program seperti penggaliang dana secara offline sungguh tidak memungkinkan di masa pandemi ini.

Penggunaan crowdfunding adalah sebuah bentuk pendanaan untuk mereka yang membutuhkan dana dalam pengembangan usahanya, dimana pendanaan tersebut terkumpul dari beberapa orang. Pendekatan ini memanfaatkan upaya kolektif dari sejumlah individu secara online menggunakan sebuah platform atau media sosial crowdfunding, sebagai alat menjangkaunya [1]. Crowdfunding juga adalah salah satu bentuk dari crowdsourcing dan keuangan alternatif yang mulai kembali muncul dan banyak dimanfaatkan orang untuk membantu para pengusaha maupun UKM pemula [2]. Crowdfunding memiliki sebuah pilar yaitu adanya website atau situs untuk di akses dan tentunya pemilik modal. Usaha atau bisnis yang dimiliki nantinya akan didaftarkan ke dalam sebuah website dan nantinya akan ditampilkan agar para pemberi dana dapat menanamkan dananya sekaligus membantu pengembangan usaha yang kamu miliki [3].

  • 2.    Reseach Methods

    2.1.    Gambaran Aplikasi

Rancangan aplikasi crowdfunding ini dibuat menggunakan framework React.js yang terdapat beberapa menu fitur yaitu pertama ada menu bernama All Project, di menu tersebut dapat menambahkan data proyek dan melakukan donasi pada proyek dengan melakukan input jumlah uang. Kedua ada menu My Project di menu tersebut dapat menghapus data proyek dan juga melihatnya.

  • 2.2.    Desain Aplikasi

Antarmuka aplikasi yang dibuat menggunakan framework dari JavaScript bernama React.js. Menggunakan database Graph ql dan Tailwind sebagai Ui framework. Berikut adalaha Flowchart yang di gunakan dalam menimplementasikan aplikasi crowdfuning.

Mtnu All ProJen

Gambar 1. Flowchart halaman All Project

Penjelasan Diagram Flow halaman All Project:

  • 1.    Pada bagian halaman All Project pengguna dapat memilih menu Create Project dan Donate untuk mendonasi pada project.

  • 2.    Jika pengguna menekan tombol Create Project maka akan diarahkan ke halaman form create project.

  • 3.    Jika pengguna tidak jadi melakukan Create Project maka pengguna akan kembali ke halaman awal.

  • 4.    Jika pengguna mengisi form maka data proyek akan bertambah

  • 5.    Jika pengguna menekan tombol Donate pada salah satu proyek yang di dalam tabel maka akan dialihkan ke halaman donate yang untuk melakukan input berupa angka.

  • 6.    Jika pengguna tidak jadi melakukan donasi maka pengguna akan kembali ke halaman awal.

  • 7.    Jika pengguna mengisi input donasi maka jumlah total donasi dari proyek tersebut bertambah.

Gambar 2. Flowchart halaman My Project

Penjelasan diagram Flow halaman My Project :

  • 1.    Pada halaman My Project pengguna dapat melihat detail proyek denga mengklik tombol View dan juga melakukan delete proyek.

  • 2.    Jika pengguna klik tombol view maka akan dialihkan ke halam detail data proyek untuk melihat data proyek.

  • 3.    Jika pengguna klik tombol delete maka data proyek akan di hapus dari tabel.

  • 3.    Result and Discussion

    3.1.    Tampilan Awal Aplikasi

Pada bagian menu atas atau navbar terdapat beberapa menu yaitu ada menu All Project, My Project, dan History. Pada saat pengguna baru pertama kali masuk, pengguna berada di halaman All Project dapat dilihat pada gambar 3. Pada halaman awal pada menu All Project terdapat 2 menu yaitu ada Create project untuk membuat proyek dan donate untuk melakukan donasi pada proyek tersebut dapat dilihat pada gambar 3 jika pengguna menekan tombol Create project maka akan dialihkan ke halaman untuk membuat proyek, yaitu dengan cara mengisi form yang di sediakan lalu menekan tombol create project dapat dilihat pada gambar 4. Jika pengguna menekan tombol donate pada salah satu proyek maka akan diahlikan ke halaman untuk melakukan donasi yaitu dengan cara mengisi input seberapa banyak nominal uang yang akan di donasikan, jika sudah mengisi maka klik tombol donate untuk mendonasi dapat dilihat pada gambar 5. Di bagian menu My Project terdapat menu untuk melakukan delete untuk mengapus data proyek dan view untuk melihat data proyek dapat dilihat pada gambar 6. Jika pengguna ingin menghapus salah satu proyek maka klik tombol delete untuk menghapus proyek dapat dilihat pada 6.

Jika pengguna ingin melihat detail proyek maka klik tombol view kemudia akan dialihkan ke halaman detail proyek dapat dilihat pada gambar 7.


Gambar 3. Tampilan Menu All Project


Gambar 4. Tampilan halaman Create Project


Gambar 5. Tampilan halaman Donate

Gambar 6. Tampilan My Project

Gambar 7. Tampilan halaman View project

Gambar 8. Hasura merupakan Database yang digunakan

  • 3.2.    Pengujian Sistem

Sistem akan diuji menggunakan metode blackbox. Hasil dari pengujian dapat dilihat pada table berikut.

Table 1. Pengujian Create Project

No.

Sekenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1.

Input field form dan tombol

Create di klik

Input Project name berupa huruf Input Creator name berupa huruf Input Target berupa angka

Data Project bertambah

Sesuai harapan

Valid

Input Start Date dan End Date

Tombol Create di klik untuk membuat project

2.

Input field target

Input field target menggunakan huruf

Sistem akan menampilkan pesan error. Input harus berupa angka

Tidak sesuai harapan

Invalid

Tabel 2. Pengujian Donate

No.

Sekenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1.

Input field diisi dengan angka dan tombol Donate di klik

Input Donate berupa angka

Tombol Donate di klik

Sistem akan menambah jumlah Total

Tidak Sesuai harapan

Invalid

2.

Input field donate

Input field donate berupa huruf

Sistem akan menampilkan pesan error. Input harus berupa angka

Tidak sesuai harapan

Invalid

Tabel 3. Pengujian Delete

No.

Sekenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1.

Tombol

Delete di klik

Tombol Delete di klik

Sistem akan menghapus data row dari tabel

Sesuai harapan

Valid

  • 4.    Conclusion

Dapat disimpulkan bahwa rancangan Crowdfunding ini dapat melakukan fungsi donate untuk menyumbangkan uang pada proyek, fungsi create project untuk membuat proyek, fungsi delete untuk menghapus proyek, dan fungsi view untuk melihat detail proyek. Database yang digunakan juga menerima, menambahkan, dan mengurangi data dari website.

References

  • [1]    Ramadhani, Niko. “Apa Itu Crowdfunding? Bagaimana Cara Kerjanya?” Akseleran, 4 March 2020, https://www.akseleran.co.id/blog/crowdfunding/. Accessed 1 October 2022.

  • [2]    “Install    Tailwind    CSS    with    Create    React    App.”    Tailwind    CSS,

https://tailwindcss.com/docs/guides/create-react-app. Accessed 2 October 2022.

  • [3]    Guide, Step. “Getting Started – React.” React, https://reactjs.org/docs/getting-started.html. Accessed 2 October 2022.

  • [4]    “Get        started        with        Apollo        Client.”        Apollo        GraphQL,

https://www.apollographql.com/docs/react/get-started. Accessed 2 October 2022.

742