Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Membangun Aplikasi AngularJS Didukung oleh Python EVE: Bagian 2

by
Read Time:12 minsLanguages:

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

Di bagian sebelumnya dari seri ini, kami menerapkan proses masuk dan mendaftar menggunakan API Eve yang kami buat di bagian pertama dari seri. Kami menggunakan Node.js dan AngularJS untuk membuat dan menjalankan aplikasi kami.

Dalam tutorial ini, kami akan mengembangkan aplikasi kami ke tingkat berikutnya dengan menggunakan Add, Edit, dan Delete API untuk membuat item di halaman beranda pengguna.

Persiapan

Untuk memulai, clone source code dari tutorial sebelumnya dari GitHub.

Setelah selesai, navigasikan ke AngularEveApp_Part1 dan install dependensi.

Pastikan bahwa Python Eve REST APIs berjalan. Mulai server aplikasi.

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

Membuat User Home

Setelah pengguna masuk berhasil, kami akan membawa pengguna ke halaman rumah. Jadi, mari kita mulai dengan membuat userHome.html. Menavigasi ke folder public dan membuat folder baru bernama userHome. Di dalam userHome Buat file bernama userHome.html dan userHome.js. Buka userHome.html dan menambahkan kode HTML berikut:

Di dalam userHome.js menentukan userHome modul dan template dan controller. Jadi, buka userHome.js dan tambahkan kode berikut:

Menambahkan referensi ke userHome.js di halaman index.html.

Inject userHome modul ke myApp app di index.js.

Dalam fungsi signIn di signin.js, di success panggilan balik dari redirect permintaan $http ke tampilan /userHome.

Simpan perubahan di atas dan me-restart node server. Arahkan browser Anda ke http://localhost:3000 dan sign in menggunakan username dan password sah. Setelah berhasil masuk, Anda harus dapat melihat halaman pengguna dengan tampilan default.

User Home Page with Default ViewUser Home Page with Default ViewUser Home Page with Default View

Menciptakan Sebuah Halaman Tambah Tugas

Mari kita tambahkan pandangan untuk memungkinkan pengguna untuk menambahkan item. Menavigasi ke folder public dan menciptakan sebuah folder bernama addItem. Di dalam addItem folder, menciptakan dua file yang disebut addItem.html dan addItem.js. Buka addItem.html dan menambahkan kode HTML berikut:

Selanjutnya, buka addItem.js dan tambahkan kode berikut untuk menentukan rute, template dan controller.

Buka userHome.html dan memodifikasi Tambah link href untuk menunjuk ke rute yang benar.

Menambahkan referensi ke addItem.js di index.html.

Inject modul addItem di myApp di index.js.

Simpan perubahan berikut dan mulai ulang server node. Setelah Anda masuk, klik pada tautan Add dan Anda seharusnya dapat melihat halaman tambah item.

Add PageAdd PageAdd Page

Menambahkan Item Menggunakan EVE API

Untuk menambahkan item, kita akan membutuhkan base64 authdata. Jadi, pada saat masuk sukses kami akan membuat username dan auth data di dalam Layanan AngularJS. Menavigasi ke folder public dan menciptakan sebuah folder bernama service. Di dalam folder service Buat file bernama service.js. Mari kita membuat modul layanan baru yang disebut myAppService.

Menambahkan layanan baru untuk modul myAppService.

Di dalam Layanan CommonProp, kita akan menentukan beberapa fungsi untuk mendapatkan dan mengatur username dan authData.

Termasuk referensi ke layanan di index.html.

Selanjutnya, menyuntikkan diatas dibuat myAppService modul modul signin.

Menyuntikkan CommonProp layanan yang diperlukan dalam SignInCtrl controller.

Pada $http success panggilan balik, tambahkan kode berikut untuk menyimpan username dan authData dalam layanan.

Selanjutnya, buka addItem.js dan inject modul myAppService.

Menyuntikkan Layanan CommonProp di AddItemCtrl.

Buka addItem.html dan ngModel dan ngClick direktif menambah kotak teks tugas dan menambahkan tugas tombol masing-masing.

Di dalam addItem.js mendefinisikan sebuah fungsi baru yang disebut addItem.

Di dalam fungsi addItem, mari kita buat panggilan $http ke API REST Python Eve. Pertama, kita perlu mendapatkan nama pengguna dan data autentikasi pengguna dari layanan.

Mari atur header yang diperlukan untuk melakukan panggilan API.

Setelah tajuk telah ditetapkan, mari gunakan $http untuk membuat panggilan API untuk menambahkan item.

Simpan perubahan dan mulai ulang server node. Arahkan browser Anda ke http://localhost:3000 dan masuk. Klik tautan Add, masukkan tugas dan klik Tambah Task. Pada panggilan API yang berhasil, Anda harus dialihkan ke halaman beranda pengguna.

Get Tasks dari EVE API

Saat beranda pengguna dimuat, kami akan membuat panggilan API untuk mengambil item yang ditambahkan oleh pengguna tertentu. Untuk membuat panggilan API, kami memerlukan username dan authData. Jadi, masukkan modul myAppService di modul userHome.

Menyuntikkan Layanan CommonProp untuk UserHomeCtrl.

Selanjutnya, mari kita mengambil username dan authData dari CommonProp.

Menetapkan header yang diperlukan untuk membuat panggilan API.

Untuk mendapatkan tugas-tugas yang dibuat oleh pengguna tertentu, kami akan membuat sebuah GET permintaan $http http://127.0.0.1:5000/item?where={"username":"'+pengguna+'"}'.

Sukses API panggilan, kita akan mem-parsing data kembali dan menetapkan data ke dalam variabel $scope.

Pertama, mari kita membuat sebuah variabel tugas:

Sekarang, mari kita mem-parsing data kembali dan mengisi variabel tasks.

Di userHome.html, kami akan iterate melalui variabel tugas dan membuat tugas-tugas yang diambil untuk pengguna tertentu. Kami akan membuat menggunakan direktif ngRepeat untuk iterate melalui variabel tugas.

Simpan perubahan di atas dan me-restart server. Arahkan browser Anda ke http://localhost:3000 dan sign in. Pada sukses sign-in Anda harus dapat melihat tugas-tugas yang ditambahkan oleh pengguna masuk.

User Home with Tasks ListedUser Home with Tasks ListedUser Home with Tasks Listed

Mengedit & Menghapus Task Item

Mengedit Tasks

Mari kita tambahkan mengedit dan menghapus tombol ke daftar tugas-tugas di halaman rumah pengguna, untuk memungkinkan mengedit dan menghapus tugas masing-masing. Buka userHome.html dan menambahkan kode HTML berikut ke .list-group div.

Kita akan menggunakan bootstrap modal untuk menunjukkan tugas diedit, sehingga termasuk jQuery dan Bootstrap di index.html.

Tambahkan kode HTML berikut ke userHome.html untuk modal pop-up untuk mengedit.

Selanjutnya membuka userHome.js dan membuat sebuah fungsi baru yang disebut editTask yang akan dipanggil pada klik tombol edit.

Seperti yang terlihat dalam kode di atas, kita sudah ditetapkan title, id dan tag catatan tertentu ke variabel $scope.edit.task. Jika pengguna memilih untuk memperbarui data tertentu, maka kita akan menggunakan $scope.edit data untuk update.

Simpan semua perubahan di atas dan me-restart server. Setelah masuk berhasil, klik pada tombol edit untuk mengedit tugas, dan Anda harus memiliki modal pop-up.

Update Task popupUpdate Task popupUpdate Task popup

Sebelumnya, kami membuat permintaan $http dari UserHomeCtrl. Mari kita mengubah yang ke fungsi yang tepat, karena kita harus memanggil yang di masa depan. Berikut adalah fungsi getAllTask.

Selanjutnya, membuat fungsi disebut update di userHome.js yang kami akan menelepon untuk memperbarui tugas diedit. Dalam fungsi update kami akan membuat permintaan PATCH untuk http://127.0.0.1:5000/item/(item-id) dengan data yang akan diperbarui. API Hawa mengharapkan tag id header diberikan ketika membuat permohonan pembaruan, jadi kita akan juga melewati tag id dalam header permintaan. Dalam fungsi update, pertama kami akan menyatakan header yang diperlukan untuk request $http.

Setelah header telah didefinisikan, kami akan membuat PATCH $http request.

Seperti yang terlihat dalam kode di atas, pada update sukses kami memiliki ditutup edit modal dan reloaded semua tugas yang terkait dengan pengguna tertentu.

Simpan semua perubahan dan me-restart server. Arahkan browser Anda ke http://localhost:3000 dan sign in menggunakan dokumen yang sah. Setelah masuk, mencoba untuk mengedit tugas tertentu dengan mengklik tombol edit.

Menghapus Task

Sebelum menghapus tugas yang kita perlu menunjukkan konfirmasi pop-up. Jadi, dalam userHome.html menambahkan kode HTML berikut untuk konfirmasi hapus pop-up.

Selanjutnya, kita perlu mendefinisikan fungsi yang disebut confirmDelete yang sudah kami telah melekat pada tombol Hapus menggunakan direktif ngClick. Di dalam fungsi confirmDelete kami akan membuat tugas ID dan TAG yang akan diperlukan ketika kita memanggil API menghapus. Berikut adalah fungsi confirmDelete:

Simpan perubahan dan me-restart server. Masuk ke aplikasi dan ketika pada pengguna rumah halaman, klik pada tombol Hapus dan Anda harus dapat melihat konfirmasi hapus pop-up.

Delete Confirmation PopupDelete Confirmation PopupDelete Confirmation Popup

Selanjutnya, kita akan menentukan salah satu fungsi lain untuk melaksanakan tugas penghapusan. Kita sudah memiliki terpasang fungsi yang disebut deleteTask untuk tombol Hapus menggunakan direktif ngClick. Sekarang, mari kita menentukan fungsi deleteTask di dalam userHome.js.

Mirip dengan fungsi update, menyerukan permintaan Hapus API Hawa memerlukan TAG ID harus ditetapkan di header. Jadi, pertama membuat header yang diperlukan seperti ditunjukkan:

Selanjutnya, kami akan membuat permintaan Hapus untuk REST API http://127.0.0.1:5000/item/(itemId).

Seperti yang terlihat dalam kode di atas, pada sukses DELETE permintaan callback kita akan menyembunyikan Hapus mengkonfirmasi modal pop-up dan ulang entri tugas dengan memanggil metode getAllTask. Berikut adalah fungsi penuh deleteTask:

Simpan perubahan di atas dan me-restart server. Arahkan browser Anda ke http://localhost:3000 dan sign in. Ketika di halaman rumah pengguna, klik tombol Hapus untuk menghapus beberapa tugas dan itu harus bekerja.

Kesimpulan

Dalam bagian ini dari serial, kita melihat bagaimana menggunakan Python Hawa REST api dibuat dalam bagian pertama dari seri dalam aplikasi AngularJS. Kami menerapkan beberapa operasi CRUD sederhana dari aplikasi AngularJS kami menggunakan api sisa malam. Saya berharap tutorial ini akan berfungsi sebagai dasar untuk menciptakan sesuatu yang mengagumkan.

Merasa bebas untuk mengirim komentar, koreksi atau pertanyaan di bawah ini. Jika Anda menemukan tutorial ini bermanfaat, kunjungi halaman instruktur saya untuk tutorial lain.

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.