Fullstack, CRUD, REST - E-commerce web application build with ReactJS + MySQL.
The purpose of this project is to pass my end of semester exams.
The code is a complete mess, BUT IT'S NOT A GARBAGE.
But it still a trash tho, HAHAH.
Happy hacking!
- Able to dynamically show tables from MySQL (no hardcoded code).
- Sort any tables by its properties (no hardcoded code).
- Able to edit tables while showing currently selected table's description.
- Import 'best raw with key with view.sql' to your local database with 'rumah_sakit' as its name.
- Download and install NodeJS LTS https://nodejs.org/en/download/
- Open ./client in your terminal
- Type 'npm install' (make sure you have solid internet connection)
- Open ./server in your terminal
- Type 'npm install' (make sure you have solid internet connection)
- Open folder ./client in your terminal
- Type 'npm start'
- Open another terminal, as your current terminal is used to maintain localhost:3000/ connection
- Open ./server in your terminal
- Type 'nodemon index.js'
- Make sure XAMPP (MYSQL and APACHE is active)
- Open http://localhost:3000/ in your web browser
- Happy shopping.
Pada halaman ini, user dapat membeli macam-macam obat dengan quantitas yang berbeda-beda. Sebelum dapat membeli, user diminta untuk log in terlebih dahulu
Di sini, user dapat memasukan username dan password yang dimilikanya untuk dapat membeli dan mengakses akun-nya. Jika user memasukan username dan password yang salah, maka akan ada pemberitahuan bahwa username atau password yang dimasukan salah. Di halaman ini juga terdapat link referral ke halaman Sign up.
Di halaman sign-up, user dapat membuat akun. Membuat akun di lakukan dengan memberi data-data diri: nama depan, nama terkahir, username, dan password. Jika salah satu dari data diri tersebut tidak lengkap, maka akan ada notifikasi yang memberitahu user untuk mengisi form dengan benar. Password harus memiliki panjang minimal 8 karakter. Di halaman sign-up, juga terdapat link referral ke halaman sign-in atau log-in.
Terlihat pada statusbar, tombol sign-up dan log-in hilang, berubah menjadi Cart (Keranjang belanja) dan icon user.
Karena user telah log-in menggunakan akun yang valid, maka user dapat berbelanja. Terlihat disitu kami ingin membeli MICONAZOLE sebanyak 3 buah. Pada saat memasukan obat ke keranjang, akan ada notifikasi yang memberi tahu bahwa obat yang kita pilih telah dimasukan ke dalam keranjang dengan berhasil. Catatan: User tidak dapat membeli lebih dari jumlah obat yang tersedia. Jika melebihi jumlah yang tersedia, maka quantitas nya akan menampilkan angka maksimum yang dapat dibeli. Contoh: user memasukan angka 99 kedalam quantitas, namun karena persediaan MICONAZOLE hanya 65, maka quantitas yang terlihat disitu hanya 65.
Saat user telah memilih obat untuk dibeli, maka obat yang dibeli tersebut akan masuk ke dalam cart. Di halaman ini, user akan mendapatkan ringkasan informasi berupa:
- Obat apa saja yang akan dibeli,
- berapa harga satuanya,
- berapa quantitas dari masing-masing obat yang akan dibeli,
- total keseluruhan quantitas yang dibeli,
- berapa harga total dari keseluruhan harga obat. Jika telah yakin untuk membeli, user dapat membeli dengan mengeklik tombol ‘Buy’. Catatan: User tidak dapat membeli lebih dari jumlah obat yang tersedia. Jika melebihi jumlah yang tersedia, maka quantitas nya akan menampilkan angka maksimum yang dapat dibeli. Contoh: user memasukan angka 99 kedalam quantitas, namun karena persediaan MICONAZOLE hanya 65, maka quantitas yang terlihat disitu hanya 65.
Tampilan ketika belum ada obat di dalam keranjang belanja user. Di halaman ini user akan diberi tahu bahwa dia belum memasukan barang apa-apa kedalam kerajang belanjanya. Di halaman ini, user juga akan diberi tahu untuk memulai belanja dengan mengelik tombol ‘mulai belanja’.
Halaman my account akan menunjukkan detail pada account user. Seperti nama pertama, nama terakhir, username, dan password. Di halaman ini, tadinya kami ingin menambahkan balance atau saldo. Namun untuk simplicitas, kami tidak jadi menambahkannya.
Sign-in dalam mode admin memberikan fitur-fitur lebih yang tidak tersedia pada mode customer. Untuk dapat masuk kedalam mode admin, dapat dilakukan dengan cara log-in meunggunakan username: admin, dan password: 123.
Halaman utama dalam mode admin. Dapat dilihat bahwa dibagian kanan atas terdapat tambahan untuk bagian admin. Yaitu ‘ADMIN’. Catatan: Admin juga dapat membeli obat layaknya customer.
Terlihat bahwa tidak terdapat banyak perubahan selain terdapat tombol ‘ADMIN’ di statusbar.
Tampilan ketika tombol ‘ADMIN’ pada statusbar diklik. Pada mode admin ini terdapat banyak halaman yang di klasifikasikan menjadi 3 hal:
- Produk
- Statistik (atau insight)
- Super Admin. 3 Klasifikasi tersebut akan kami bahas satu per satu. Di halaman selanjutnya.
Tampilan dari Halaman List Obat. Pada halaman ini ditunjukkan jenis-jenis obat yang dijual. Tidak hanya itu, admin juga dapat mengedit, menghapus, dan juga menambahkan data ke tabel obat.
Tampilan dari Halaman Persediaan. Pada halaman ini ditunjukkan persediaan obat yang dijual. Tidak hanya itu, admin juga dapat mengedit, menghapus, dan juga menambahkan data ke tabel persediaan.
Tampilan dari Halaman Log Perubahaan. Pada halaman ini ditunjukkan perseidan obat yang dijual. Tabel ini hanya dapat dilihat, tidak dapat di edit.
Tampilan dari pilihan Obat Kadaluarsa. Pada halaman ini ditunjukkan obat yang telah kadaluarsa. Tabel ini hanya dapat dilihat, tidak dapat di edit.
Di halaman ini, terdapat grafik yang menunjukan total penjualan pada tahun ini, total pendapatan lifetime (dari awal toko tersebut dibangun sampai saat ini), dan detail dari obat apa saja yang terjual.
Admin juga dapat memilih untuk melihat statistik pembelian dengan pilihan rentang waktu yang tidak terbatas (lifetime, tahun ini, bulan ini, dan waktu custom seperti minggu ini, kemarin, dan kapan saja).
Untuk mengaktifkan mode custom, pilih Time Span pada opsi.
Maka akan muncul menu baru yang berisi 2 field date. Yaitu From dan Until. ‘From’ dari kapan waktu penjualan yang ingin dilihat, dan ‘until’ sampai kapan. Jika kita memilih From 2019-01-01 sampai until 2019-01-31 maka kita akan melihat statistik pada bulan Januari 2019. Jika kita memilih From 2019-01-01 sampai until 2019-01-07 maka kita akan melihat statistik pada pada minggu pertama bulan Januari.
Tampilan dari halaman Tabel Pesanan. Pada halaman akan menunjukkan pesanan yang dilakukan oleh pelanggan ketika mereka membeli obat. Siapa yang membeli, obat apa yang dibeli dan berapa yang dibeli.
Halaman ini mirip dengan halaman Pesanan. Hanya saja disini tidak berfokus pada siapa yang membeli, namun berfokus pada obat yang terjual di hari ini.
Yang terakhir merupakan tampilan dari Control Panel. Pada halaman ini admin dapat mengedit maupun mendelete seluruh tabel-tabel yang ada pada pilihan-pilihan sebelumnya. Admin juga dapat melihat profil para user serta mendelete dan mengedit profil user. Halaman Control Panel dibagi menjadi beberapa klasifikasi:
- Obat – Obat an
- Transaksi
- Users
Untuk lebih jelasnya dapat dilihat pada gambar dibawah ini:
Aplikasi kami juga dapat melakukan search / mencari obat yang ingin dibeli. Fitur ini dapat dilakukan di halaman mana saja karena terdapat pada statusbar (yang selalu berada di atas halaman yang berwarna biru).
Aplikasi kami juga dapat mengurutkan tabel sesuai dengan setiap properties pada table tersebut secara ascending maupun descending
Contohnya, jika pada Tabel Obat, maka dapat diurutkan sesuai kode obat, nama obat, bentuk obat, dan lainya, sesuai dengan semua properties dari tabel obat.
Aplikasi kami juga memiliki fitur kemanan, yaitu:
- Jika menuju url yang tidak diketahui, misalnya: “localhost:3000/asdf”, maka akan muncul tampilan bahwa tidak ada halaman yang dilalui oleh url tersebut
- Jika customer mencoba masuk kedalam admin page, maka akan dialihkan ke 404 Page (karena customer tidak memiliki akses ke admin page).
Fitur Edit:
