React_Cherry_Demo

Bereaksi demo ceri

Ini adalah proyek web yang dibuat oleh React and Material UI. Dalam proyek ini, kami memiliki halaman sistem pengguna, produk dan pesanan, dan mendapatkan API formulir data.

Dalam sistem pengguna, kami memiliki register dan halaman login, yang dapat mendaftarkan pengguna baru dan login oleh pengguna. Jika kami tidak masuk sebagai pengguna, kami hanya dapat mengakses beranda, jika tidak, kami dapat memasukkan halaman produk dan pesanan untuk memeriksa produk dan memesan data dari API.

Di halaman Produk, kami mendapatkan semua data produk dari API dan menunjukkannya di tabel material UI dengan pagination, penyortiran dan pencarian, setiap produk dapat diedit dan dihapus, kami juga dapat menambahkan produk baru dan mengunggah gambar ke dalam produk.

Di halaman Pesanan, sama seperti halaman Produk, kami mendapatkan semua data pesanan dari API dan tampilkan di tabel. Baris pesanan dapat disaring berdasarkan tanggal.

Baik produk dan halaman pesanan dapat mengekspor data ke file CSV.

Dependensi digunakan

Material ui

npm install @material-ui/core

Material ui dimulai

Axios

npm install axios

Axios memulai

Bereaksi Router Dom

npm install react-router-dom

Bereaksi router dom memulai

Bereaksi CSV

npm i react-csv

Bereaksi CSV terpasang

Tangkapan layar proyek

Halaman Beranda

Halaman login

Halaman register

Halaman Produk

Tambahkan produk

Edit produk

Hapus Produk

Pencarian Produk

Pemintal

Pesanan dengan pagination yang berbeda

Pesanan Filter Tanggal