ANGULAR-LARAVEL

LECTURE NOTES
Web Programming
Minggu 6
Adding Angular to Your App
COMP6621 – Web Programming

LEARNING OUTCOMES
LO 2: Menerapkan teknik dan konsep dalam mengembangkan pemrograman web
Outcomes:
Mahasiswa mampu menerapkan Teknik dan konsep pemograman web menggunakan

Angular didalam laravel
OUTLINE MATERI (Sub-Topic):
• Angular
• Menambahkan Angular ke halaman pencarian
• Menangani Angular dan permintaan Ajax

ISI MATERI
1. Angular
Angular adalah Kerangka Front End Populer untuk membuat aplikasi sisi klien. Hari
ini kita akan melihat bagaimana kita dapat menggunakan keduanya dan
bagaimana kita dapat berinteraksi satu sama lain melalui API.
• Instal bower untuk membantu kami memasang Angular:
>sudo npm install -g bower
• Inisialisasi file bower aplikasi kami:
>bower in
• Pasang bower untuk membantu kami mendapatkan Angular:
>bower instal sudut
• salin file yang disebut bower_compontents / angular / angular.js ke folder
publik / js saya. Nantinya, kita akan menggunakan Gulp untuk ini:
Gambar 6.1:
Source: Laravel 5.x Cookbook, Nutile.

• Masukkan angular.js ke halaman:
• Tambahkan satu lagi file bernama app.js untuk kode kita di folder public/js;
dan mendaftarkannya di bawah angular.js termasuk file:
Gambar 6.2
Source: Laravel 5.x Cookbook, Nutile
• Daftarkan angular.module. Di controller
Gambar 6.3
• Buka browser dan buka Konsol JavaScript dengan membuka di sini di Chrome:

Gambar 6.4
• Klik pada tab Consol:
Gambar 6.5
Tambahkan np-app ke tag body pada

resources/views/layout.blade.php sehingga terlihat seperti ini:
<body ng-app = "app">
• tambahkan controller ke halaman rumah Anda, resources/view/home/
_search.blade.php parsial:
Gambar 6.6

• muat ulang halaman, dan Anda akan melihat ini:
Gambar 6.7
2. Menambahkan Angular ke halaman pencarian

Konversi pencarian menjadi berbasis Angular, artinya ini adalah bahwa ketika
pengguna mengetikkan kata untuk dicari, mereka kemudian akan menekan Cari
dan alih-alih memuat ulang halaman, kami akan melakukan permintaan
menggunakan Ajax dan mengambil respon dari ini permintaan.
Bagaimana cara melakukannya….
• Pertama, kami menyiapkan MainController agar terlihat seperti ini:
Gambar 6.8
• Pergilah ke resources/views/home/_search.blade.php Lihat yang saya buat

dan perbarui formulir yang akan dikontrol oleh Angular:

Gambar 6.9
• pengguna mengetik kata dan klik Cari, mereka melihat ini:
Gambar 6.10
• kami perlu mengirim permintaan ini ke suatu tempat! Jadi, mari kita
tambahkan $http ke MainController kami sehingga kami dapat melakukan
permintaan GET ke backend.
Gambar 6.11

• kami menjalankan ini, kami mendapatkan kesalahan (Ini karena kami belum
membangunnya; lihat resep selanjutnya untuk yang ini)
Gambar 6.12
• berurusan dengan Keberhasilan dan Kesalahan tanggapan sehingga kami

dapat bereaksi sesuai kebutuhan dan memperbarui fungsi GET:
Gambar 6.13 : HTTP Success and Error


Gambar 6.14: Update get function
3. Menangani Angular dan permintaan Ajax

Membangun kedua bagian backend di Laravel untuk mengambil permintaan
Angular, dan kemudian menanggapi kembali ke Angular. Kami akan menampilkan
informasi ke frontend Angular.
• Instal https://github.com/laracasts/PHP-Vars-To-Js-Transformer library untuk
memulai dan menggunakannya di controller Laravel:
> Composer require "Laracasts / utilities": "~ 2.0"

• Izinkan semua langkah instalasi yang terlihat di halaman GitHub mereka:
o Jalankan vendor publish, jadi saya dapat mengubah file konfigurasi:
php artisan vendor:publish
o Ubah file config file config / javascript.php; tambahkan file footer dan
sertakan dalam tata letak:

Gambar 6.15: Edit Java script
tambahkan file footer sesuai kebutuhan ke resources/view/footer.

blade.php sehingga terlihat seperti ini:
Gambar 6.16: Footer place holder

• Perbarui Pengontrol yang disebut app / Http / Controllers /

HomeController.php, untuk mengatur objek jendela JavaScript agar api_result
kami benar saat pengguna mengunjungi halaman ini. Kami akan
menunjukkan ini nanti:

• Bersihkan Tampilan untuk memindahkan lingkup Angular ke atas level,

sehingga formulir dapat hidup dengan lingkup hasil pencarian:
• mengatur backend; Saya akan menangani permintaan GET yang datang:
• colokkan ke MainController untuk menunjukkannya menerima respons.
• Satu hal lagi, dengan mengubah resources/view/home/_search.blade.php,
kita dapat menampilkan roda gigi berputar saat halaman mencari.


SIMPULAN
• Angular adalah Kerangka Front End Populer untuk membuat aplikasi sisi
klien.
• Berbasis sudut, artinya ini adalah bahwa ketika pengguna mengetikkan kata
yang akan dicari, mereka kemudian akan menekan Cari dan alih-alih memuat
ulang halaman, kami akan melakukan permintaan menggunakan Ajax dan
mengambil respons dari permintaan ini.

DAFTAR PUSTAKA
o Nutile, A. (2016). Laravel 5.x Cookbook. Packt Publishing. ISBN:978-1-786-46208-4
o Stauffer. Matt. (2019). Laravel: Up & Running A Framework for Building Modern PHP
Apps 2nd Edition. O’Reilly. ISBN:978-1-492-04121-4
o https://appdividend.com/2017/09/22/laravel-5-5-angular-4-tutorial-example-scratch/
o https://angular.io/start

ANGULAR-LARAVEL

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

ANGULAR-LARAVEL

Diunggah oleh

Hak Cipta:

Format Tersedia

LECTURE NOTES

Adding Angular to Your App

COMP6621 – Web Programming

LO 2: Menerapkan teknik dan konsep dalam mengembangkan pemrograman web

Mahasiswa mampu menerapkan Teknik dan konsep pemograman web menggunakan

OUTLINE MATERI (Sub-Topic):

COMP6621 – Web Programming

COMP6621 – Web Programming

• Daftarkan angular.module. Di controller

COMP6621 – Web Programming

• Klik pada tab Consol:

Tambahkan np-app ke tag body pada

COMP6621 – Web Programming

2. Menambahkan Angular ke halaman pencarian

• Pergilah ke resources/views/home/_search.blade.php Lihat yang saya buat

COMP6621 – Web Programming

• pengguna mengetik kata dan klik Cari, mereka melihat ini:

COMP6621 – Web Programming

• berurusan dengan Keberhasilan dan Kesalahan tanggapan sehingga kami

Gambar 6.13 : HTTP Success and Error

COMP6621 – Web Programming

3. Menangani Angular dan permintaan Ajax

> Composer require "Laracasts / utilities": "~ 2.0"

COMP6621 – Web Programming

tambahkan file footer sesuai kebutuhan ke resources/view/footer.

Gambar 6.16: Footer place holder

• Perbarui Pengontrol yang disebut app / Http / Controllers /

Gambar 6.17: Edit Java script

• Bersihkan Tampilan untuk memindahkan lingkup Angular ke atas level,

COMP6621 – Web Programming

COMP6621 – Web Programming

COMP6621 – Web Programming

COMP6621 – Web Programming

Anda mungkin juga menyukai