Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Node.js

Membangun Aplikasi Web Menggunakan Node.js

by
Read Time:12 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Meyria (you can also view the original English article)

Pengenalan

Selain membangun API, Node.js sangat bagus untuk membangun aplikasi web standar. Ini memiliki alat yang hebat untuk memenuhi selera pengembang web. Dalam tutorial ini, Anda akan membangun aplikasi web yang bisa berfungsi sebagai perpustakaan lokal.

Sementara membangun Anda akan belajar tentang beberapa jenis middleware, Anda akan melihat bagaimana menangani pengiriman form di Node.js, dan Anda juga bisa merujuk dua model.

Mari memulai.

Memulai

Mulailah dengan memasang generator express pada mesin anda.

Jalankan perintah generator express untuk menghasilkan aplikasi anda.

Sekarang bermigrasi ke pekerjaan Anda, buka package.json, dan buat dependensi yang sama dengan yang saya miliki di bawah ini.

Jalankan perintah untuk menginstal paket.

Siapkan file entri

app.js dibuat saat Anda menjalankan perintah generator; Namun, Anda perlu mengatur konfigurasi ekstra. Edit file agar terlihat seperti yang saya miliki di bawah ini.

  1. Anda membutuhkan dua route yang akan Anda gunakan dalam membangun aplikasi ini. Anda akan segera membuat route file. Rute yang diperlukan ditetapkan sebagai nilai pada dua variabel berbeda yang digunakan saat menyiapkan middleware untuk route Anda.
  2. Anda menetapkan Mongoose untuk menggunakan global.Promise. Variabel MongoDB ditugaskan MONGODB_URI untuk lingkungan kerja anda atau jalan ke server mongo lokal anda. Variabel ini dilewatkan sebagai argumen untuk terhubung ke server MongoDB yang sedang berjalan.
  3. Anda menyiapkan session middleware menggunakan express-session. Middleware ini penting karena Anda akan menampilkan pesan sekejap di beberapa bagian aplikasi anda.
  4. Anda menyiapkan middleware untuk validasi. Middleware ini akan digunakan untuk memvalidasi form input, memastikan pengguna aplikasi tidak mengirimkan form kosong. Validasi menggunakan paket yang terinstal, express-validator.
  5. Anda menyiapkan middleware yang akan berguna saat menampilkan pesan kilat. Middleware ini menggunakan connect-flash.
  6. Route untuk aplikasi disiapkan untuk memanfaatkan file route yang anda butuhkan. Permintaan yang menunjuk ke /genres dan /books akan menggunakan genre dan buku yang mengarahkan file masing-masing. Pada saat ini Anda belum membuat file route, namun anda akan segera melakukannya.

Model Buku dan Genre

Model Buku akan menggunakan Skema Mongoose untuk menentukan bagaimana buku akan terstruktur. Buat direktori yang disebut models, dan sebuah file baru bernama Book.js. Begini tampilannya.

Di sini anda memiliki empat field. Field terakhir digunakan untuk menyimpan genre yang dimiliki setiap buku. Bidang genre di sini merujuk pada model Genre, yang akan dibuat selanjutnya. Itu sebabnya tipe ini diatur ke Schema.Types.ObjectId, di mana id dari masing-masing genre yang dirujuk akan disimpan. ref menentukan model yang Anda referensikan. Perhatikan bahwa genre disimpan sebagai array, artinya buku bisa memiliki lebih dari satu genre.

Mari kita segera membuat model Genre.

Untuk Genre Anda, Anda hanya perlu satu field: nama.

Route Genre Index dan View

Untuk tutorial ini, Anda akan menggunakan dua jalur route untuk genre anda: jalur untuk menambahkan genre baru, dan satu lagi yang mencantumkan genre yang anda miliki. Buat file di direktori route Anda yang disebut genres.js.

Mulailah dengan membutuhkan semua modul yang akan anda gunakan.

Selanjutnya, turunkan route yang menangani file index untuk genre anda.

Route ini akan dipanggil kapan pun permintaan diajukan ke /genres. Di sini Anda memanggil metode pencarian pada model Genre Anda untuk mendapatkan semua genre yang telah dibuat. Genre ini kemudian di-render pada template yang disebut genres. Ayo maju dan buat itu, tetapi pertama, perbarui layout.pug anda agar terlihat seperti ini:

Ini akan memberi anda pandangan struktur yang bagus untuk membantu navigasi. Sekarang buat file view bernama genre.pug. Dalam file ini, anda akan melakukan perulangan melalui genre yang dibuat dan menampilkan setiap genre dalam daftar yang tidak berurutan.

Berikut adalah bagaimana file akan terlihat.

Tambahkan Route Genre Baru dan View

Kembali ke routes/genres.js untuk menambahkan route yang akan menangani pembuatan genre baru.

  1. Tugas router ini adalah dengan hanya menampilkan halaman untuk menambahkan route baru. Router ini dipanggil setiap kali permintaan dibuat ke jalur /genres/add.
  2. Router ini menangani pengajuan form. Saat form dikirimkan, kitai periksa untuk memastikan bahwa sebuah nama dimasukkan oleh pengguna. Jika tidak ada nama yang dimasukkan, halaman akan dirender-ulang. Jika diperiksa bagus, genre akan disimpan dan pengguna dialihkan ke halaman /genres.
  3. Modul ini diekspor sebagai sebuah router.

Sekarang snda bisa terus maju dan membuat halaman untuk menambahkan genre baru.

Route Buku dan View

Buat sebuah file route baru untuk buku, dan nama diberi nama books.js. Seperti yang anda lakukan sebelumnya dengan genre, mulailah dengan membutuhkan modul-modul yang diperlukan.

Selanjutnya, mengatur router untuk menampilkan semua buku yang disimpan di Perpustakaan. Coba itu sendiri seperti anda mengaturnya pada genre; anda selalu dapat memeriksa kembali untuk melakukan koreksi.

Saya kira anda akan mencobanya—berikut adalah bagaimana hal ini akan terlihat.

Ketika router ini dipanggil, permintaan dibuat untuk menemukan semua buku-buku yang disimpan dalam database. Jika semuanya berjalan lancar, buku-buku akan ditampilkan pada halaman /books, jika tidak sebuah error akan muncul.

Anda perlu membuat file baru untuk menampilkan semua buku, dan berikut adalah bagaimana hal ini akan terlihat.

Anda cukup melakukan perulangan melalui buku-buku yang dikembalikan dan mengeluarkan nama dan deskripsi dari setiap buku yang menggunakan daftar yang tidak berurutan. Nama buku mengarah ke halaman masing-masing buku.

Route Tambah Buku Baru dan View

Pada router berikutnya anda akan mengatur penanganan penambahan buku baru. Kedua router akan digunakan di sini: yang satu hanya akan membuat halaman, dan yang lain akan menangani pengajuan form.

Ini adalah bagaimana router terlihat.

Di router pertama, anda menampilkan halaman /addBooks. Router ini dipanggil ketika permintaan dibuat pada lokasi /add. Sejak buku-buku ditambahkan seharusnya memiliki genre, anda ingin menampilkan genre yang sudah disimpan ke database.

Kode di atas mencari semua genre dalam database anda dan mengembalikan mereka pada variabel genre. Dengan ini, anda akan dapat melakukan perulangan melaui genre-genre dan menampilkannya sebagai sebuah checkbox.

Router kedua menangani pengajuan form. Pertama, anda cek isi permintaannya untuk memastikan bahwa beberapa field tidak kosong. Disinilah middleware express-validator yang anda atur dalam app.js menjadi berguna. Jika ada kesalahan, halaman di-render ulang. Jika tidak ada, misalnya Buku baru disimpan dan pengguna akan diarahkan ke halaman /books.

Mari kita lanjutkan dan buat view untuk ini.

Buat sebuah file view baru bernama addBooks.pug. Perhatikan bahwa nama view sesuai dengan parameter pertama yang diberikan kepada res.render. Hal ini karena anda me-render sebuah template. Selama pengalihan, anda cukup melalui lokasi yang anda ingin arahkan ulang, seperti yang anda lakukan dengan res.redirect('/books').

Setelah menetapkan itu, berikut seperti apa seharusnya view akan terlihat.

Hal yang penting untuk dicatat di sini adalah aksi form dan metode. Ketika tombol kirim diklik, anda membuat permintaan POST ke /books/add. Satu hal lagi—sekali lagi anda melakuan perulangan melalui koleksi genre yang dikembalikan dan menampilkannya masing-masing.

Route Tampil Buku dan View

Mari kita turunkan route untuk menangani permintaan yang dilakukan untuk setiap halaman buku. Sementara anda di sana, sangat penting untuk mengekspor modul anda juga.

Tidak ada keajaiban yang terjadi sini

Pertama, permintaan yang dilakukan ke router ini harus memiliki id: yaitu id dari buku. Id ini diperoleh dari parameter permintaan menggunakan req.params.id. Ini digunakan untuk mengidentifikasi buku tertentu yang harus diperoleh dari database, sebagai id yang unik. Ketika buku ditemukan, nilai buku genre diisi dengan semua genre yang telah disimpan untuk contoh buku ini. Jika semua berjalan lancar, view buku akan di-render, jika tidak sebuah error akan muncul.

Mari kita buat view untuk sebuah buku. Berikut adalah bagaimana hal ini akan terlihat.

Anda dapat memuliai node server anda dengan menjalankan:

Kesimpulan

Sekarang Anda tahu bagaimana membangun sebuah aplikasi web standar di Node.js, bukan hanya sebuah aplikasi agenda sederhana. Anda mampu untuk menangani pengiriman form, mereferensi dua model, dan mengatur beberapa middleware.

Anda dapat melangkah lebih jauh dengan mengembangkan aplikasinya—coba tambahkan kemampuan untuk menghapus sebuah buku. Pertama tambahkan tombol ke halaman tampil, dan kemudian pergi ke file route dan tambahkan router untuk ini. Perhatikan bahwa ini akan menjadi permintaan POST.

Anda juga bisa memikirkan lebih banyak fitur untuk menambahkannya pada aplikasi. Saya harap anda menikmatinya.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.