Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Basis data relasional seperti MySQL secara tradisional menjadi pilihan masuk ke basis data. Namun, basis data NoSQL seperti MongoDB semakin populer karena strukturnya yang fleksibel untuk penyimpanan data dan kemampuannya untuk menyimpan dan mengambil data dengan cepat.

Basis data ini menawarkan bahasa kueri alternatif yang dapat Anda integrasikan dengan lancar dengan aplikasi seluler dan web modern. Baca terus untuk mempelajari cara menyimpan data React dalam database MongoDB.

Apa Itu Basis Data NoSQL?

NoSQL adalah singkatan dari Tidak hanya SQL, database non-relasional. Jenis database ini tidak bergantung pada model database relasional tradisional. Itu tidak memiliki struktur kolom-baris yang ditentukan dan dapat menyimpan data dalam berbagai format berbeda, membuatnya lebih fleksibel dan dapat diskalakan.

Perbedaan utama antara NoSQL dan database relasional adalah bahwa alih-alih memiliki baris dan kolom, database NoSQL menyimpan data dalam dokumen, yang memiliki struktur dinamis.

instagram viewer

Siapkan Database MongoDB

MongoDB adalah basis data NoSQL paling populer. Ini adalah database sumber terbuka yang menyimpan data dalam dokumen (tabel) seperti JSON di dalam koleksi (database).

Berikut tampilan struktur dokumen MongoDB sederhana:

{
 Nama Depan: 'Andrew',
 Peran: 'Pengembang Backend'
}

Untuk memulai, Anda harus terlebih dahulu mengatur database MongoDB. Setelah Anda selesai mengonfigurasi MongoDB, buka aplikasi Kompas MongoDB. Kemudian, klik Koneksi Baru tombol untuk membuat koneksi dengan server MongoDB yang berjalan secara lokal.

Jika Anda tidak memiliki akses ke alat MongoDB Compass GUI, Anda dapat menggunakan Alat shell MongoDB untuk membuat database dan koleksinya.

Berikan URI koneksi dan nama koneksi, lalu klik Simpan & Hubungkan.

Terakhir, klik tombol Buat Database, isi nama database, dan berikan nama koleksi untuk koleksi demo.

Buat React Client

Anda dapat menemukan kode aplikasi ini di dalamnya repositori GitHub.

Untuk mem-bootstrap aplikasi React dengan cepat, buat folder proyek di mesin lokal Anda, ubah ke direktori itu, dan jalankan perintah terminal ini untuk membuat dan menjalankan server pengembangan:

npx buat-reaksi-aplikasi-aplikasi-saya
cd aplikasi saya
mulai npm

Selanjutnya, instal Axios. Paket ini akan memungkinkan Anda mengirim permintaan HTTP ke server Express.js backend Anda untuk menyimpan data di database MongoDB Anda.

npm instal axios

Buat Formulir Demo untuk Mengumpulkan Data Pengguna

Buka src/App.js file, hapus kode React boilerplate, dan ganti dengan yang berikut:

impor'./App.css';
impor Bereaksi, { useState } dari'reaksi';
impor Aksioma dari'axios';
fungsiAplikasi() {
const [nama, setName] = useState("")
const [peran, setRole] = useState("")


const handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/masukkan', {
 nama lengkap: nama,
 peran perusahaan: peran
 })
 }


kembali (


"Aplikasi">
"Tajuk-aplikasi"> 
"formulir masuk">


Nama Depan</p>


 NamaKelas = "Nama"
 jenis="teks"
 placeholder="Nama depan ..."
 onChange={(e) => {setName (e.target.nilai)}}
 />




 Peran Perusahaan</p>


 NamaKelas = "Peran"
 jenis="teks"
 pengganti = "Peran..."
 onChange={(e) => {setRole (e.target.nilai)}}
 />








eksporbawaan Aplikasi;

Mari kita uraikan:

  • Deklarasikan dua status, nama, dan status peran, untuk menyimpan data pengguna yang dikumpulkan dari kolom input menggunakan hook useState.
  • Itu dalam perubahan metode setiap kolom input menjalankan panggilan balik yang menggunakan metode status untuk menangkap dan menyimpan data yang dikirimkan pengguna melalui formulir.
  • Untuk mengirimkan data ke server backend, fungsi penangan onSubmit menggunakan Axios.post metode untuk mengirimkan data yang diteruskan dari status sebagai objek ke titik akhir API backend.

Untuk memberi gaya pada formulir yang dirender, tambahkan kode berikut ke file App.css.

* {
lapisan: 0;
batas: 0;
ukuran kotak: kotak perbatasan;
}
tubuh {
font-family: 'Poppin', Sans Serif;
warna latar belakang: #8EC1D6;
}


.logDalam formulir {
batas: 100pxmobil;
lebar: 200px;
tinggi: 250px;
warna latar belakang: #fff;
radius perbatasan: 10px; 
}


.logDalam formulirP {
perataan teks: tengah;
ukuran huruf: 12px;
font-berat: 600;
warna: #B8BFC6;
lapisan: 10px 10px;
}


.logDalam formulirmemasukkan {
menampilkan: memblokir;
lebar: 80%;
tinggi: 40px;
batas: 10pxmobil;
berbatasan: 1pxpadat#ccc;
radius perbatasan: 5px;
lapisan: 0 10px;
ukuran huruf: 16px;
warna: hitam;
}
.logDalam formulirtombol {
warna latar belakang: #8EC1D6;
warna: #fff;
kursor: penunjuk;
ukuran huruf: 15px;
radius perbatasan:7px;
lapisan: 5px 10px;
berbatasan: tidak ada;
}

Sekarang, putar server pengembangan untuk memperbarui perubahan dan arahkan ke http://localhost: 3000 di browser Anda untuk melihat hasilnya.

Buat Backend Express.js

Backend Express bertindak sebagai middleware antara klien React Anda dan database MongoDB. Dari server, Anda dapat menentukan skema data Anda dan membuat koneksi antara klien dan database.

Buat server web Ekspres dan instal kedua paket ini:

npm instal cor luwak

Mongoose adalah library Object Data Modeling (ODM) untuk MongoDB dan Node. Ini menyediakan metode berbasis skema yang disederhanakan, untuk memodelkan data aplikasi Anda dan menyimpannya dalam database MongoDB.

Paket CORS (Cross-Origin Resource Sharing) menyediakan mekanisme bagi server backend dan klien frontend untuk berkomunikasi dan meneruskan data melalui titik akhir API.

Buat Skema Data

Buat folder baru di direktori root folder proyek server Anda dan beri nama model. Di folder ini, buat file baru: dataSchema.js.

Skema, dalam hal ini, mewakili struktur logis dari database Anda. Ini mendefinisikan dokumen (catatan) dan bidang (properti) yang membentuk koleksi dalam database.

Tambahkan kode berikut ke dataSchema.js:

const luwak = memerlukan('luwak');
const ReactFormDataSchema = baru luwak. Skema({
 nama: {
 jenis: Rangkaian,
 diperlukan: BENAR
 },
 peran: {
 jenis: Rangkaian,
 diperlukan: BENAR
 }
});
const Pengguna = luwak.model('Pengguna', ReactFormDataSchema);
modul.ekspor = Pengguna;

Kode ini membuat skema Mongoose untuk model Pengguna. Skema ini mendefinisikan struktur data untuk data pengguna, termasuk nama dan peran pengguna. Skema tersebut kemudian digunakan untuk membuat model untuk Pengguna. Ini memungkinkan model untuk menyimpan data dalam koleksi MongoDB sesuai dengan struktur yang ditentukan dalam Skema.

Siapkan Server Ekspres

Selanjutnya, buka index.js file di folder proyek server, dan tambahkan kode ini:

const mengungkapkan = memerlukan('cepat');
const luwak = memerlukan('luwak');
const kor = memerlukan('kor');
const aplikasi = ekspres();
const Pengguna= memerlukan('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


luwak.sambungkan('mongodb://localhost: 27017/reactdata', { gunakanNewUrlParser: BENAR });


aplikasi.posting('/menyisipkan', asinkron(req, res) => {
const FirstName = req.body.firstName
const CompanyRole = req.body.companyRole


const formData = baru Pengguna({
 nama: Nama Depan,
 peran: Peran Perusahaan
 })


mencoba {
menunggu formData.save();
 kirim ulang("masukkan data..")
 } menangkap(salah) {
menghibur.log (salah)
 }
});


const port = process.env. PELABUHAN || 4000;
app.listen (port, () => {
menghibur.catatan(`Server dimulai di port ${port}`);
});

Mari kita uraikan:

  • Inisialisasi Express, luwak, dan CORS di server.
  • Paket Mongoose membuat koneksi ke database MongoDB menggunakan Menghubung metode yang mengambil domain URI dan objek. URI adalah string koneksi yang digunakan untuk membuat koneksi dengan database MongoDB. Objek menentukan konfigurasi; dalam hal ini, berisi pengaturan untuk menggunakan bentuk pengurai URL terbaru.
  • Server web terutama menanggapi permintaan yang datang dari rute yang berbeda dengan fungsi penangan yang sesuai. Untuk kasus ini, server memiliki rute POST yang menerima data dari klien React, menyimpannya dalam variabel, dan meneruskannya ke model data yang diimpor.
  • Server kemudian menggunakan blok try-and-catch untuk menyimpan dan menyimpan data dalam database MongoDB, dan mengeluarkan semua kesalahan, jika ada.

Terakhir, aktifkan server pengembangan untuk memperbarui perubahan dan menuju ke klien React Anda di browser Anda. Ketik data apa pun di formulir, dan lihat hasilnya di database MongoDB.

Menggunakan MERN Stack untuk Membangun Aplikasi

Tumpukan MERN menyediakan seperangkat alat yang efisien dan kuat untuk membangun aplikasi. Anda dapat membuat aplikasi dunia nyata yang lengkap menggunakan MongoDB, Express, React, dan Node.js,

Ekosistem React juga menyediakan paket untuk membantu Anda bekerja dengan formulir web. Beberapa yang paling populer adalah Formik, KendoReact Form, dan React Hook Form.