Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular & MongoDB: Login

by
Read Time:7 minsLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home

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

Angular adalah one-stop framework untuk menciptakan mobile dan web apps menggunakan kode yang dapat digunakan kembali. Menggunakan Angular, anda dapat membagi seluruh aplikasi ke komponen yang dapat digunakan kembali, yang membuatnya lebih mudah untuk mempertahankan dan menggunakan kembali kode.

Dalam seri tutorial ini, anda akan belajar bagaimana untuk memulai dengan menciptakan sebuah aplikasi web menggunakan  dengan MongoDB sebagai back end. Anda akan menggunakan Node.js untuk menjalankan server.

Sepanjang tutorial ini, anda akan membangun aplikasi blogging menggunakan , Node.js, dan MongoDB.

Dalam tutorial ini, anda akan melihat bagaimana untuk memulai dengan membuat aplikasi dan menciptakan komponen Login.

Persiapan

Mari kita mulai dengan menginstal Angular CLI.

Setelah Anda menginstal Angular CLI, Buatlah folder projcet dengan nama AngularBlogApp.

Dari folder proyek, buatlah sebuah Angular app baru menggunakan perintah berikut:

Setelah anda membuat aplikasi client, navigasikan ke folder project dan menginstal dependensi diperlukan menggunakan Node Package Manager (npm).

Jalankan server klien menggunakan npm.

Anda harus menjalankan aplikasi di http://localhost:4200/.

Pengaturan Aplikasi

Aplikasi web Angular anda akan memiliki root komponen. Buat sebuah folder bernama root di dalam folder src/app. Buat file bernama root.component.html dan tambahkan kode HTML berikut:

Tambahkan file bernama root.component.ts dan tambahkan kode berikut:

Hapus file app.component.html, app.component.ts, app.component.scss, dan app.component.spec.ts. Anda hanya akan memiliki satu file bernama app.module.ts di dalam folder src/app.

Import RootComponent di dalam file app.module.ts.

Sertakan RootComponent di ngModules dan bootstrapkan.

Simpan perubahan dan restart server. Anda akan memiliki RootComponent yang ditampilkan ketika aplikasi dijalankan/diload.

Anda akan menggunakan Angular Router untuk routing di aplikasi blogging ini. Jadi impor dependensi routing-related dalam sebuah file baru yang bernama app.routing.ts di dalam folder src/app.

Menentukan path rute komponen seperti ditunjukkan:

Ekspor rute membuat modul dengan semua rute penyedia.

Berikut adalah tampilan file app.routing.ts:

Seperti yang terlihat dalam kode di atas, Anda belum belum membuat LoginComponent. Itu telah ditambahkan demi kejelasan.

Mengimpor kelas ROUTING di file app.module.ts.

Sertakan dalam impor NgModule.

Tempatkan RouterOutlet di halaman root.component.html. Ini dimana komponen rute yang akan diberikan.

Buatlah sebuah folder bernama login di dalam folder src/app. Di dalam folder login, buat file bernama login.component.ts dan tambahkan kode berikut:

Buat file bernama login.component.html dan tambahkan kode berikut:

Simpan perubahan di atas dan restart server. Sebagai per routes yang ditentukan ketika aplikasi diload LoginComponent akan bisa ditampilkan.

Login Component - Blogging AppLogin Component - Blogging AppLogin Component - Blogging App

Membuat komponen Login

Anda sudah memberikan dasar untuk LoginComponent saat menyeting aplikasi. Mari kita membuat tampilan untuk LoginComponent menggunakan Bootstrap.

Download dan include style CSS bootstrap di folder assets dan include referensi di halaman src/index.html.

Letakkan wrapper sekitar app-root di halaman index.html.

Tambahkan HTML berikut ke halaman login.component.html.

Buat file bernama login.component.css di dalam folder login dan menambahkan style CSS berikut.

Memodifikasi dekorator @Component untuk menginclude style CSS.

Simpan perubahan di atas dan coba jalankan/load aplikasi. Anda akan memiliki LoginComponent yang ditampilkan dengan tampilan login.

Login Screen Angular Blogging AppLogin Screen Angular Blogging AppLogin Screen Angular Blogging App

Membuat Login Service

LoginComponent akan perlu berinteraksi dengan database untuk melihat apakah pengguna masuk log sah atau tidak. Jadi itu akan perlu untuk membuat API calls. Anda akan menyimpan bagian interaksi database dalam file terpisah yang bernama login.service.ts.

Buat file bernama login.service.ts dan tambahkan kode berikut:

Impor LoginService di LoginComponent dan tambahkan sebagai penyedia di dekorator komponen.

Tambahkan metode yang bernama validateLogin dalam file login.service.ts yang akan membuat API call. Berikut adalah tampilannya:

Seperti yang terlihat dalam kode di atas, itu mengembalikan observable yang akan berlangganan dalam file login.component.ts. Berikut adalah tampilan file login.service.ts:

Menerapkan User Login Validatian

Tambahkan ngModel direktif untuk elemen input di login.component.html.

Tambahkan event klik tombol sign.

Berikut adalah tampilan login.component.html setelah diubah:

Menentukan dan inisialisasi variabel user dalam file login.component.ts.

Model User telah didefinisikan dalam folder src/app/models. Berikut adalah tampilannya:

Definisikan sebuah method yang bernama validateLogin yang akan dipanggil pada ketika tombol diklik. Berikut adalah tampilan method:

Ketika username dan password telah dimasukkan, metode validateLogin berlangganan di LoginService method untuk memvalidasi pengguna login.

Berikut adalah tampilan file login.component.ts:

Wrapping

Di bagian Angular blogging app seri tutorial, anda melihat bagaimana untuk memulai dengan menciptakan aplikasi web menggunakan Angular. Anda membuat struktur dasar dari Angula app dan membuat LoginComponent yang akan memungkinkan pengguna untuk memvalidasi username dan password.

Dalam bagian selanjutnya dari seri tutorial, Anda akan menulis REST API untuk validasi login pengguna dan membuat komponen home.

Source code dari tutorial ini tersedia di GitHub.

Beri tahu kami pendapat dan saran anda di komentar di bawah ini.

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.