Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular & MongoDB: Beranda

by
Read Time:9 minsLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Login
Creating a Blogging App Using Angular & MongoDB: Show Post

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

Di bagian pertama dari seri tutorial, Anda melihat bagaimana memulai dengan membuat aplikasi web Angular. Anda belajar cara mengatur aplikasi dan membuat komponen Login.

Di bagian seri ini, Anda akan bergerak lebih jauh dan menuliskan REST API yang diperlukan untuk berinteraksi dengan back-end MongoDB. Anda juga akan membuat komponen Home yang akan ditampilkan setelah pengguna berhasil login.

Persiapan

Mari kita mulai dengan mengkloning kode sumber dari bagian pertama dari seri tutorial.

Arahkan ke direktori proyek dan instal dependensi yang diperlukan.

Setelah Anda menginstal dependensi, mulai ulang server aplikasi.

Arahkan browser Anda ke http://localhost:4200 dan Anda harus menjalankan aplikasi.

Membuat REST API Login

Di dalam folder proyek AngularBlogApp-Home, buat folder lain yang disebut server. Anda akan menulis REST API menggunakan Node.js.

Arahkan ke folder server dan inisialisasi proyeknya.

Masukkan rincian yang diperlukan dan Anda harus memiliki proyek diinisialisasi.

Anda akan menggunakan kerangka Express untuk membuat server. Instal Express menggunakan perintah berikut:

Setelah Anda menginstal Express, buat file bernama app.js. Ini akan menjadi file root untuk server Node.js Anda.

Berikut ini tampilan file app.js:

Seperti yang terlihat pada kode di atas, Anda mengimpor express ke app.js. Menggunakan express, Anda membuat app dari aplikasi.

Menggunakan app, Anda membuka endpoint /api/user/login yang akan menampilkan pesan. Mulai server Node.js menggunakan perintah berikut:

Arahkan browser Anda ke http://localhost:3000/api/user/login dan Anda harus memiliki pesan yang ditampilkan.

Anda akan membuat permintaan POST dari layanan Angular ke server dengan parameter username dan password. Jadi, Anda perlu menguraikan parameter permintaan.

Instal body-parser, yang merupakan middleware body-parser Node.js untuk memilah parameter permintaan.

Setelah Anda menginstalnya, impor di app.js.

Tambahkan kode berikut ke file app.js.

Dua opsi body-parser di atas mengembalikan middleware yang hanya mengurai body json dan urlencoded dan hanya melihat permintaan di mana header Content-Type sesuai dengan opsi type.

Anda akan menggunakan Mongoose untuk berinteraksi dengan MongoDB dari Node.js. Jadi instal Mongoose menggunakan Node Package Manager (npm).

Setelah Anda memiliki mongoose terpasang, impor di app.js.

Tentukan URL database MongoDB di app.js.

Mari gunakan Mongoose untuk terhubung ke database MongoDB. Berikut ini tampilnya:

Jika koneksi dibuat, pesan akan dicatat bersama dengan username dan password.

Berikut ini tampilan file app.js:

Mulai ulang server Node menggunakan perintah berikut:

Untuk terhubung ke server Node dari aplikasi Angular, Anda perlu mengatur proxy. Buat file bernama proxy.json di dalam folder client/src. Berikut ini tampilnya:

Ubah file package.json klien untuk memulai aplikasi menggunakan file proxy.

Simpan perubahan dan mulai server klien.

Arahkan browser Anda ke http://localhost:4200 dan masukkan nama pengguna dan kata sandi. Klik tombol sign in dan Anda harus memiliki parameter yang dicatat di konsol Node.

Memvalidasi Login Pengguna

Untuk berinteraksi dengan MongoDB menggunakan Mongoose, Anda perlu menentukan skema dan membuat model. Di dalam folder server, buat folder bernama model.

Buat file bernama user.js di dalam folder model. Tambahkan kode berikut ke file user.js:

Seperti yang terlihat pada kode di atas, Anda mengimpor mongoose ke user.js. Anda membuat userSchema menggunakan schema mongoose dan membuat model User menggunakan model mongoose.

Impor file user.js di dalam file app.js.

Sebelum melakukan kueri koleksi user MongoDB, Anda perlu membuat koleksi. Pergi ke shell MongoDB dengan mengetik mongo. Buat koleksi user menggunakan perintah berikut:

Masukkan record yang akan Anda kuerikan.

Sekarang, setelah mongoose terhubung ke MongoDB, Anda akan menemukan record dari database menggunakan username dan password yang dilewatkan masuk. Berikut ini bagaimana tampilan API:

Seperti yang terlihat pada kode di atas, setelah Anda menerima respons dari database, Anda mengembalikannya ke sisi klien.

Simpan perubahan di atas dan coba jalankan klien dan server. Masukkan nama pengguna sebagai roy dan kata sandi sebagai 123 dan Anda seharusnya dapat melihat hasilnya di konsol browser.

Mengarahkan ke Komponen Home

Setelah pengguna berhasil divalidasi, Anda perlu mengalihkan pengguna ke komponen Home. Jadi mari kita mulai dengan membuat komponen Home.

Buat folder bernama Home di dalam folder src/app. Buat file bernama home.component.html dan tambahkan kode HTML berikut:

Buat file bernama home.component.css dan tambahkan gaya CSS berikut:

Buat file komponen bernama home.component.ts dan tambahkan kode berikut:

Seperti yang terlihat pada kode di atas, Anda baru saja membuat HomeComponent menggunakan dekorator @Component dan menentukan selector, templateUrl, dan styleUrls.

Tambahkan HomeComponent ke NgModules di app.module.ts.

Impor HomeComponent di app.routing.ts dan tentukan rute untuk home.

Dalam metode validateLogin di file login.component.ts, pada validasi yang berhasil mengarahkan pengguna ke HomeComponent. Untuk mengalihkan, Anda perlu mengimpor Angular Router.

Jika respons dari panggilan API berhasil, Anda akan menavigasi ke HomeComponent menggunakan Angular Router.

Berikut adalah bagaimana file login.component.ts terlihat:

Simpan perubahan di atas dan mulai ulang server. Sign in ke aplikasi menggunakan nama pengguna dan kata sandi yang ada, dan Anda akan dialihkan ke HomeComponent.

Angular Blog App Home ComponentAngular Blog App Home ComponentAngular Blog App Home Component

Merangkum

Dalam tutorial ini, Anda melihat cara menulis endpoint REST API untuk sign-in pengguna. Anda belajar bagaimana menggunakan Mongoose untuk berinteraksi dengan MongoDB dari Node. Setelah validasi yang sukses, Anda melihat bagaimana menggunakan Angular Router untuk menavigasi ke HomeComponent.

Bagaimana pengalaman Anda belajar menulis aplikasi Angular dan bagian back end-nya? Beri tahu kami pendapat dan saran Anda di komentar di bawah ini.

Kode sumber dari tutorial ini tersedia di GitHub.

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.