Jika Anda sedang mengembangkan aplikasi web, Anda hampir pasti akan terus berinteraksi dengan database. Dan ketika tiba waktunya untuk memilih cara Anda akan berinteraksi, pilihannya bisa sangat banyak
Pada artikel ini, kita akan melihat secara detail 5 cara berbeda untuk berinteraksi dengan database Anda menggunakan JavaScript, dan kita akan membicarakan pro dan kontra dari masing-masing cara. Kita akan mulai dengan pilihan tingkat terendah — Perintah SQL — lalu beralih ke abstraksi tingkat yang lebih tinggi.
Memilih perpustakaan database yang tepat untuk aplikasi JavaScript Anda dapat berdampak besar pada pemeliharaan, skalabilitas, dan kinerja kode Anda, jadi sebaiknya luangkan waktu untuk mencari tahu pilihan Anda
Contoh Aplikasi Kami
Kami akan menggunakan aplikasi Express biasa yang dihosting di Heroku sebagai contoh kami. Semua kode untuk artikel ini ada di repositori GitHub ini. Jangan ragu untuk mengkloningnya dan ikuti
Prasyarat
Untuk menjalankan contoh aplikasi, Anda memerlukan perangkat lunak berikut di mesin Anda
- Lingkungan terminal mirip unix (Mac OSX dan Linux baik-baik saja. Jika Anda menggunakan Windows, Anda memerlukan Subsistem Windows untuk Linux)
- git (dan akun github)
- npm (versi 6 atau lebih baru)
- Alat baris perintah Heroku
Jika Anda belum memiliki akun Heroku, Anda harus mendaftar untuk mendapatkan akun gratis. Jika Anda tidak ingin mendaftar ke Heroku, Anda juga dapat menjalankan aplikasi secara lokal terhadap instance Postgres lokal. Jika Anda merasa nyaman dengan itu, seharusnya cukup mudah untuk melihat perubahan apa yang perlu Anda lakukan daripada menerapkannya ke Heroku
Setelah Anda menginstal semua hal di atas, jalankan "database": "dfb3aad8c026in",4 di terminal, dan Anda siap untuk memulai.
Bangun dan Terapkan Aplikasi Hello World
Untuk memulai, kami akan menyiapkan yang berikut ini
- Aplikasi Express sepele yang hanya menyajikan halaman web "Hello, World".
- Database Postgres
- Dua tabel, mewakili "pengguna" dan "komentar" (pengguna memiliki banyak komentar)
- Beberapa contoh data (dalam hal ini, dihasilkan melalui mockaroo. com)
Saya telah membuat contoh aplikasi yang akan mengatur semua ini untuk Anda (asalkan Anda telah menjalankan "database": "dfb3aad8c026in",4 seperti yang disebutkan di atas). Untuk mengaturnya, harap jalankan perintah berikut dari baris perintah.
"database": "dfb3aad8c026in",_6
"database": "dfb3aad8c026in",_7
Ini akan memakan waktu beberapa menit untuk selesai. Sambil menunggu, Anda dapat melihat makefile untuk melihat perintah yang relevan, yang melakukan hal berikut
- Buat aplikasi Heroku baru
- Tambahkan instance database Postgres
- Terapkan aplikasi ke Heroku
- Jalankan perintah di Heroku untuk menyiapkan tabel database dan mengimpor data sampel CSV
- Buka URL aplikasi Heroku Anda di jendela browser baru
Di akhir proses ini, Anda akan melihat "Halo, Dunia" di halaman web
Mengambil Data Dengan SQL
Oke - kita sudah siap. Kami telah membuat database dengan dua tabel dan beberapa data sampel. Tapi kami belum melakukan apa-apa dengannya. Langkah selanjutnya adalah mengaktifkan aplikasi web kita untuk mengambil data dari database
Setiap kali Anda berinteraksi dengan database relasional, Anda melakukannya dengan mengirimkan perintah SQL ke soket jaringan tempat database mendengarkan. Hal ini berlaku untuk semua pustaka yang akan kita lihat dalam artikel ini — pada tingkat terendah, mereka semua mengirim perintah SQL ke database dan mengambil keluaran apa pun yang dihasilkan
Jadi, cara pertama yang akan kita lihat untuk berinteraksi dengan database kita adalah melakukan hal itu — mengirim perintah SQL. Untuk melakukan ini, kita akan menginstal pustaka pg JavaScript, yang memungkinkan kita mengirim SQL ke database Postgres dan mengambil hasilnya
Untuk menginstal pustaka pg, jalankan perintah berikut
"database": "dfb3aad8c026in",8
Ini akan mengambil dan menginstal perpustakaan, dan itu akan menambahkannya ke paket Anda. json dan kunci-paket. file json. Mari lakukan perubahan itu
"database": "dfb3aad8c026in",_9
"username": "clqcouauvejtvw",0
Untuk berbicara dengan database kami, kami memerlukan beberapa detail
- Nama host mesin Postgres sedang berjalan
- Port jaringan Postgres sedang mendengarkan
- Nama database tempat data kita berada
- Nama pengguna dan sandi dengan izin untuk mengakses data tersebut
Sebagian besar pustaka basis data akan mengizinkan kami membuat koneksi baik dengan menyediakan objek ke pustaka yang memiliki kunci dan nilai untuk semua detail itu, atau dengan menggabungkan semuanya menjadi satu "URL basis data", yang akan kami lakukan.
Saat Anda menambahkan database ke aplikasi Heroku, Anda secara otomatis mendapatkan variabel lingkungan yang disebut DATABASE_URL, berisi semua detail yang Anda perlukan untuk terhubung ke database. Anda dapat melihat nilai DATABASE_URL Anda dengan menjalankan
"username": "clqcouauvejtvw",1
Ini akan menampilkan semua variabel lingkungan yang dapat digunakan aplikasi Anda. Seharusnya hanya ada satu untuk saat ini, jadi Anda akan melihat sesuatu seperti ini di keluaran
DATABASE_URL. "username": "clqcouauvejtvw",_2
"username": "clqcouauvejtvw",3
Dalam kasus contoh kita, yang rusak seperti ini
SQL
xxxxxxxxxx
1
13
1
{2
3
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",4
5
"port": 5432,6
7
"database": "dfb3aad8c026in",8
9
"username": "clqcouauvejtvw",_10
11
"password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"12
13
}
Nilai DATABASE_URL Anda akan berbeda, tetapi strukturnya akan sama
Sekarang kita telah menginstal perpustakaan pg, dan kita tahu bagaimana menghubungkan ke database kita, mari kita jalankan contoh pertama kita untuk berinteraksi dengan database. Kami hanya akan mengambil daftar pengguna dan menampilkannya di halaman web kami. Di bagian atas indeks kami. js, kami akan memerlukan pustaka pg kami, dan membuat objek koneksi basis data
JavaScript
xxxxxxxxxx
1
1
const { Pool } = require('pg');2
3
{_0
Di blok "username": "clqcouauvejtvw",_4, kami akan mengubah baris get untuk memanggil metode yang menampilkan daftar pengguna dari database
"username": "clqcouauvejtvw",_5
Terakhir, kita akan mengimplementasikan fungsi listUsers
JavaScript
xxxxxxxxxx
1
23
1
{_22
3
{_34
5
{_46
7
{_58
9
{_610
11
{_712
13
{_814
15
{_916
17
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",018
19
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",120
21
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",222
23
}
Kode ini menunggu hingga koneksi dibuat ke database kami, lalu mengirimkan kueri SQL menggunakan fungsi kueri dan mengambil hasilnya
Sekarang, langkah ini bisa gagal karena banyak alasan berbeda, jadi dalam kode kami menguji untuk memastikan kami memiliki beberapa data dan, jika kami melakukannya, kami memberikan hasil. baris ke pengguna kunci dari objek hasil kami. Selanjutnya, kami meneruskan hasil ke fungsi render, lalu melepaskan koneksi database kami
Di views/pages/index. ejs kami memiliki akses ke objek hasil, sehingga kami dapat menampilkan data pengguna kami seperti ini
HTML
xxxxxxxxxx
1
11
1
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",52
3
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",64
5
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",76
7
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",88
9
"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",_910
11
"port": 5432,0
Anda dapat melihat kode dengan perubahan ini di sini. ________6______6 dan "username": "clqcouauvejtvw",7 adalah nama dua kolom dari tabel pengguna .
Mari terapkan perubahan ini agar kita dapat melihat data di aplikasi Heroku kita
"username": "clqcouauvejtvw",_8
"username": "clqcouauvejtvw",_9
"password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"_0
Ini akan memakan waktu satu atau dua menit untuk diterapkan. Ketika perintah itu selesai dieksekusi, muat ulang browser Anda dan Anda akan melihat daftar pengguna di halaman web
Contoh MySQL
Contoh di atas adalah untuk Postgres, tetapi kode untuk database relasional umum lainnya akan serupa. Misalnya, jika Anda menggunakan MySQL
- Alih-alih "database": "dfb3aad8c026in",8 gunakan "password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"2 (gunakan mysql2, bukan mysql - mysql2 lebih cepat dan mendukung async/menunggu)
- Dalam indeks. js Anda akan membutuhkan mysql seperti ini
"password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"3
- Fungsi listUsers akan terlihat seperti ini
JavaScript
xxxxxxxxxx
1
25
1
{_22
3
"port": 5432,34
5
"port": 5432,46
7
"port": 5432,58
9
"port": 5432,610
11
"port": 5432,712
13
"port": 5432,814
15
"port": 5432,_916
17
"database": "dfb3aad8c026in",018
19
"database": "dfb3aad8c026in",_120
21
"database": "dfb3aad8c026in",_222
23
}
tampilan/halaman/indeks. ej tetap sama
Anda dapat melihat contoh proyek dengan perubahan ini di sini
Kesimpulan
Kami telah membahas banyak hal di sini, tetapi ini semua mendasar untuk memahami cara kerja semua akses database. Di bagian selanjutnya, kita akan melihat bagaimana pembuat kueri dan pustaka pemodelan objek-relasional dibangun di atas fondasi ini untuk memungkinkan Anda bekerja dengan data database dalam kode dengan cara yang lebih terasa seperti bekerja dengan fungsi dan objek JavaScript