Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Saat membuat aplikasi satu halaman kita harus menggunakan beberapa jenis kerangka kerja untuk melakukan beberapa pekerjaan untuk kita sehingga kita dapat fokus pada fungsi sebenarnya.
AngularJS cocok di sini dengan sempurna, karena fitur seperti injeksi dependensi dinamis dan pengikatan data dua arah sangat hebat. Terkadang kita juga membutuhkan beberapa jenis server. Jika Anda memilih PHP maka Laravel mungkin pilihan terbaik Anda, karena mudah untuk bekerja dengannya dan cukup kuat.
Di bagian tutorial ini, kita akan membangun front-end aplikasi kita menggunakan AngularJS. Angular adalah kerangka kerja yang sangat unik. Alih-alih abstrak HTML atau menyediakan beberapa cara manipulasi DOM mereka memperluas HTML untuk menangani kenyataan bahwa itu pasti tidak dirancang untuk bekerja dengan data dinamis.
Karena itu Abgular mungkin memerlukan lebih banyak pembelajaran daripada kerangka kerja lainnya, tapi ini sangat berharga untuk waktu yang dihabiskan.
Persiapan
Sebelum kita memulai pemrograman front-end kita, kita harus memodifikasi bagian Laravel sedikit. Buka app/views, hapus contoh yang ada dan buatlah file bernama home.php. Sekarang mari kita buat tata letaknya.
Mulailah dengan DOCTYPE dan tag html:
1 |
<!DOCTYPE html>
|
2 |
<html ng-app="app"> |
Seperti yang Anda lihat, kita telah menggunakan beberapa barang AngularJS - direktif ng-app. Ini memberitahu angular untuk menggunakan modul yang diberi nama app untuk aplikasi ini (kita akan menentukannya nanti). Setelah itu tambahkan head dengan title dan CSS:
1 |
<title>Customer Management</title> |
2 |
<link rel="stylesheet" href="style.css"> |
Sekarang Anda dapat menempatkan tag script dengan Angular, itu modul routing dan aplikasi kita:
1 |
<script src="http://code.angularjs.org/1.2.3/angular.js"></script> |
2 |
<script src="http://code.angularjs.org/1.2.3/angular-route.js"></script> |
3 |
<script src="./app.js"></script> |
Direktif ini memberitahu Angular untuk menempatkan template yang diminta ke elemen itu.
Setelah itu kita hanya perlu menambahkan rute untuk menampilkan template (di app/routes.php). Tambahkan ini sebelum rute untuk controller:
1 |
Route::get('/', function () { return View::make('layout'); }); |
Sekarang jika Anda memulai server (dengan php artisan serve) Anda akan melihat tata letak dasar saat Anda menavigasi ke http://localhost:8000/ di browser Anda:
Gaya
Artikel ini tidak akan berfokus pada apapun yang berhubungan dengan CSS, namun untuk membuat aplikasi lebih menyenangkan dipandang mata saat Anda sedang mengembangkan, kita akan menambahkan beberapa gaya untuknya. Buka direktori public/ dari aplikasi Anda (ini di samping app/) dan buat style.css dengan kode ini di dalamnya:
1 |
body { |
2 |
font-family: Calibri, sans-serif; |
3 |
width: 800px; |
4 |
margin: auto; |
5 |
}
|
6 |
|
7 |
a { |
8 |
cursor: pointer; |
9 |
color: blue; |
10 |
text-decoration: none; |
11 |
}
|
12 |
|
13 |
table { |
14 |
width: 100%; |
15 |
}
|
16 |
|
17 |
table thead tr { |
18 |
background: #ccc; |
19 |
}
|
20 |
|
21 |
table tbody tr { |
22 |
background: #ddd; |
23 |
}
|
24 |
|
25 |
table tbody tr:nth-child(2n + 1) { |
26 |
background: #eee; |
27 |
}
|
28 |
|
29 |
table tr td:nth-child(1) { |
30 |
text-align: center; |
31 |
}
|
32 |
|
33 |
table tr td:nth-child(3), table tr td:nth-child(4) { |
34 |
text-align: right; |
35 |
}
|
36 |
|
37 |
.error { |
38 |
color: red; |
39 |
}
|
Sekarang buka aplikasi di browser Anda dan tata letaknya harus dipusatkan dengan font yang lebih bagus di judul:
Struktur Aplikasi Dasar
Kita akan mulai dengan deklarasi modul. Modul di Angular cukup banyak hal yang sama seperti di perpustakaan AMD manapun, namun dengan penambahan injeksi dependensi yang merupakan hal yang sangat berguna, seperti yang akan Anda lihat. Berikut adalah deklarasi modul app kita
1 |
var app = angular.module('app', [ 'ngRoute' ]); |
Sintaksnya sederhana - pertama masuk ke nama modul, dan kemudian array dependensi - kita hanya akan menggunakan ngRoute di sini untuk menangani navigasi, yang akan dilanjutkan.
Routing
Routing didefinisikan dalam metode config() dari modul:
1 |
app.config(function configure($routeProvider) { |
Inilah saat injeksi ketergantungan dimulai untuk pertama kalinya - callback kita akan membawa $routesProvider sebagai satu-satunya argumen, dan modul ini akan disuntikkan oleh Angular.
Anda harus memastikan bahwa nama argumen persis sama dengan nama modulnya, karena Angular menggunakannya untuk mencocokkan modul yang sesuai.
Sekarang mari kita gunakan $routeProvider untuk mengatur rute:
1 |
$routeProvider
|
2 |
.when('/', { controller: 'CustomersController', templateUrl: './templates/customers.html' }) |
3 |
.when('/customer/:id', { controller: 'CustomerController', templateUrl: './templates/customer.html' }) |
4 |
.otherwise({ redirect: '/' }); |
5 |
});
|
Seperti yang dapat Anda lihat untuk menentukan rute yang harus Anda panggil ketika metode when() dari penyedia (perhatikan bahwa mereka dapat berantai).
Parameter pertama adalah URI, dan yang kedua adalah objek dengan pilihan rute. Di sini, kita memasang controller dan template yang sesuai ke setiap rute. Pada bagian kedua kita juga menggunakan :id pada akhirnya untuk menandai parameter rute yang akan kita gunakan nanti. Metode otherwise() mendefinisikan apa yang akan terjadi jika URI lainnya diakses.
Factory
Sebelum kita menulis controller, kita harus membuat sesuatu yang disebut factory. factory adalah fungsi yang mengembalikan sebuah layanan, yang sangat membantu jika Anda ingin memisahkan data fungsi yang mendapatkan/menetapkan dari controller (yang tentu saja adalah apa yang selalu ingin Anda lakukan). Kita mendefinisikannya menggunakan metode factory() dari modulnya:
1 |
app.factory('Data', function Data($http) { |
Parameter pertama adalah nama layanan, dan yang kedua adalah fungsi yang mengembalikan layanan yang akan dibuat menggunakan factory ini.
Kita akan menggunakan modul $http untuk mengakses server kita menggunakan Ajax. Ini menyediakan metode pintasan untuk semua metode HTTP dan masing-masing mengembalikan sebuah promise (jika Anda tidak mengetahui apa itu lihat di sini dan di sini).
Kita harus mengembalikan layanan sebagai objek dengan semua metode yang akan digunakan di controller kita:
1 |
return { |
Yang pertama akan GET semua pelanggan sehingga kita bisa menunjukkannya dalam daftar:
1 |
getCustomers: function getCustomers() { return $http.get('/customers/all'); }, |
Yang kedua hanya akan GET satu pelanggan dengan id-nya:
1 |
getCustomer: function getCustomer(id) { return $http.get('/customers?id='+ id); }, |
Ketiga akan POST permintaan untuk menambahkan pengguna ke database:
1 |
addCustomer: function addCustomer(data) { return $http.post('/customers', data); }, |
Argumen kedua di $http.post() adalah data yang akan dikirim ke server.
Berikutnya akan DELETE pelanggan dengan id yang disediakan:
1 |
removeCustomer: function removeCustomer(id) { return $http.delete('/customers?id='+ id); }, |
Sekarang akan ada beberapa transaksi yang serupa. Satu untuk mendapatkan semuanya:
1 |
getTransactions: function getTransactions(id) { return $http.get('/transactions?id='+ id); }, |
Satu untuk menambahkan yang baru:
1 |
addTransaction: function addTransaction(data) { return $http.post('/transactions', data); }, |
Dan satu untuk menghapus:
1 |
removeTransaction: function removeTransaction(id) { return $http.delete('/transactions?id='+ id); } } }); |
Controller Pelanggan
Controller di Angular (seperti namanya) adalah cara untuk mengendalikan perilaku aplikasi. Kita akan memilikinya untuk setiap template. Pertama kita akan membuat satu untuk halaman utama. Mulailah dengan mendefinisikannya:
1 |
app.controller('CustomersController', function CustomersController($scope, Data) { |
Parameter kedua di sini adalah fungsi constructor untuk controller. Argumen pertamanya ($scope) adalah penghubung antara DOM dan controller. Ini adalah jantung dari data binding dua arah dari Angular. Yang kedua adalah layanan dari factory yang kita buat tadi.
Mendapatkan Daftarnya
Sekarang kita akan mendapatkan daftar pelanggan dari server menggunakan layanan kita:
1 |
Data.getCustomers().success(parseCustomers); |
Semua promise di Angular memberikan metode succes() dan error() yang dapat digunakan untuk menambahkan callback yang sesuai. Sekarang mari kita definisikan fungsi yang akan mengurai data yang masuk untuk ditampilkan di halaman:
1 |
function parseCustomers(data) { $scope.customers = data; } |
Ya, hanya itu yang diperlukan untuk mengisi template dengan data. Tidak perlu kode innerHTML/appendChild().
Menambahkan Pelanggan Baru
Kita juga perlu memberikan kemampuan untuk menambah dan menghapus pelanggan. Pertama mari kita buat sebuah objek dalam lingkup dimana kita akan menyimpan data pelanggan baru:
1 |
$scope.newCustomer = { name: '', email: '' }; |
Dengan cara ini kita bisa menghindari akses DOM saat pengguna menambahkan pelanggan. Sekarang fungsi yang benar-benar akan menambahkan pelanggan:
1 |
$scope.addCustomer = function addCustomer() { |
Karena nama lengkap pengguna akan ditampilkan di tabel masukan untuk itu akan sama, jadi kita harus membaginya untuk mendapatkan nama depan dan belakang:
1 |
var names = $scope.newCustomer.name.split(' '); |
Sekarang kita memanggil fungsi yang sesuai dari factory kita dengan data dari $scope:
1 |
Data.addCustomer({ first_name: names[0], last_name: names[1], email: $scope.newCustomer.email }) |
Setelah itu kita menambahkan listener success dan error atas promise yang dikembalikan:
1 |
.success(customerAddSuccess).error(customerAddError); } |
Mari kita definisikan callback success dahulu:
1 |
function customerAddSuccess(data) { |
Argumen data berisi teks tanggapan. Kita harus menghapus variabel $scope.error:
1 |
$scope.error = null; |
Push pelanggan baru yang ditambahkan ke $scope.customers:
1 |
$scope.customers.push(data); |
Dan tetapkan $scope.newCustomer ke keadaan awal untuk menghapus masukannya:
1 |
$scope.newCustomer = { name: '', email: '' }; } |
Callback error hanya akan mengatur variabel $scope.error ke teks yang diterima dari server:
1 |
function customerAddError(data) { $scope.error = data; } |
Menghapus Pelanggan
Fungsi untuk menghapus pelanggan akan mengambil id-nya sebagai parameter:
1 |
$scope.removeCustomer = function removeCustomer(id) { |
Kita juga akan menampilkan kotak konfirmasi sehingga pengguna memiliki kesempatan untuk membatalkan aksinya:
1 |
if (confirm('Do you really want to remove this customer?')) { |
Jika pengguna yakin dia ingin melanjutkan, kita menghapus pelanggannya:
1 |
Data.removeCustomer(id).success(customerRemoveSuccess); } } |
Callback di sini akan menghapus pelanggan dari $scope.customer menggunakan id yang didapat dari server:
1 |
function customerRemoveSuccess(data) { |
2 |
var i = $scope.customers.length; |
3 |
while (i--) { |
4 |
if ($scope.customers[i].id == data) { |
5 |
$scope.customers.splice(i, 1); |
6 |
}
|
7 |
}
|
8 |
}
|
Hasilnya
Kode lengkap akan terlihat seperti ini:
1 |
app.controller('CustomersController', function CustomersController($scope, Data) { |
2 |
Data.getCustomers().success(parseCustomers); |
3 |
|
4 |
function parseCustomers(data) { |
5 |
$scope.customers = data; |
6 |
}
|
7 |
|
8 |
$scope.newCustomer = { name: '', email: '' }; |
9 |
|
10 |
$scope.addCustomer = function addCustomer() { |
11 |
var names = $scope.newCustomer.name.split(' '); |
12 |
Data.addCustomer({ |
13 |
first_name: names[0], |
14 |
last_name: names[1], |
15 |
email: $scope.newCustomer.email |
16 |
})
|
17 |
.success(customerAddSuccess).error(customerAddError); |
18 |
}
|
19 |
|
20 |
function customerAddSuccess(data) { |
21 |
$scope.error = null; |
22 |
$scope.customers.push(data); |
23 |
$scope.newCustomer = { name: '', email: '' }; |
24 |
}
|
25 |
|
26 |
function customerAddError(data) { |
27 |
$scope.error = data; |
28 |
}
|
29 |
|
30 |
$scope.removeCustomer = function removeCustomer(id) { |
31 |
if (confirm('Do you really want to remove this customer?')) { |
32 |
Data.removeCustomer(id).success(customerRemoveSuccess); |
33 |
}
|
34 |
}
|
35 |
|
36 |
function customerRemoveSuccess(data) { |
37 |
var i = $scope.customers.length; |
38 |
while (i--) { |
39 |
if ($scope.customers[i].id == data) { |
40 |
$scope.customers.splice(i, 1); |
41 |
}
|
42 |
}
|
43 |
}
|
44 |
});
|
Template Pelanggan
Sekarang untuk benar-benar menampilkan data ke pengguna kita harus membuat template. Kita mendefinisikannya dalam rute yang akan menjadi ./templates/customers.html, jadi buatlah direktori public/templates dan file customers.html di dalamnya.
Pertama tambahkan judul sehingga pengguna tahu di mana dia berada:
1 |
<h2>Customers</h2> |
Selanjutnya kita membutuhkan tabel dengan judul yang bagus untuk menunjukkan datanya:
Sekarang tambahkan elemen tbody. Dan di sinilah sihir Angular masuk lagi. Dengan menggunakan perintah ng-repeat, kita memberi tahu Angular untuk mengulang elemennya:
1 |
<tr ng-repeat="customer in customers"> |
Sintaksnya seperti di perulangan for...in JavaScript. Sekarang kita bisa mengakses variabel customer untuk mendapatkan semua data yang kita butuhkan. Dalam Angular Anda memasukkan variabel menggunakan kurung kurawal ganda:
1 |
<tbody>
|
2 |
<tr>
|
3 |
<td>{{ customer.id }}</td> |
4 |
<td>
|
5 |
<a ng-click="removeCustomer({{ customer.id }})">[-]</a> |
6 |
<a href="#/customer/{{ customer.id }}"> |
7 |
{{ customer.first_name }} {{ customer.last_name }}
|
8 |
</a>
|
9 |
</td>
|
10 |
<td>{{ customer.email }}</td> |
11 |
</tr>
|
12 |
</tbody>
|
Ada juga perintah ng-click yang akan bertindak sebagai event callback onclick, kita menggunakannya untuk menambahkan kemampuan untuk menghapus pelanggan. Selanjutnya ada footer dengan masukan sehingga pengguna bisa menambahkan pelanggan baru:
1 |
<tfoot>
|
2 |
<tr>
|
3 |
<td></td>
|
4 |
<td><input ng-model="newCustomer.name" style="width: 99%"></td> |
5 |
<td><input ng-model="newCustomer.email" style="width: 170px"><a ng-click="addCustomer()">[+]</a></td> |
6 |
</tr>
|
7 |
</tfoot>
|
Kita menggunakan perintah ng-model untuk mengikat variabel yang sesuai dari ruang lingkup ke masukan, sehingga diperbarui setiap ada perubahan nilai masukan.
Hal terakhir yang harus dilakukan adalah menunjukkan pesan kesalahan jika ada. Untuk mencapainya kita akan menggunakan perintah ng-show yang hanya akan menunjukkan elemennya jika ekspresi tertentu adalah true:
1 |
<p ng-show="error" class="error"> |
2 |
{{ error }}
|
3 |
</p>
|
Itu saja! Sekarang Anda dapat membuka aplikasi di browser Anda dan Anda harus melihat ini:
Anda dapat menambahkan pelanggan baru dengan mengklik tanda tambah di sudut kanan bawah tabel.
Controller Pelanggan
Sekarang mari kita membuat controller untuk view satu pelanggan:
1 |
app.controller('CustomerController', function CustomerController($scope, $routeParams, Data) { |
Mendapatkan Data
Kita mendapatkan data pelanggan menggunakan modul $routeParams yang menyimpan semua parameter rute seperti :id yang kita tentukan sebelumnya:
1 |
Data.getCustomer($routeParams.id).success(parseCustomer); |
2 |
|
3 |
function parseCustomer(data) { |
4 |
$scope.customer = data; |
5 |
}
|
Callback hampir sama dengan di CustomersController. Sekarang mari kita dapatkan semua transaksi pelanggan:
1 |
Data.getTransactions($routeParams.id).success(parseCustomersTransactions); |
2 |
|
3 |
function parseCustomersTransactions(data) {
|
4 |
$scope.transactions = data; |
5 |
$scope.sum = 0; |
6 |
for (var k in data) {
|
7 |
$scope.sum += parseFloat(data[k].amount); |
8 |
} |
9 |
} |
Callback sedikit berbeda dari yang terakhir karena kita juga ingin menunjukkan jumlah dari jumlah transaksi. Kita perlu menggunakan parseFloat() karena Laravel mengirimkan float sebagai string.
Menambahkan Transaksi Baru
Kodenya akan sangat mirip dengan yang digunakan untuk membuat pelanggan baru:
1 |
$scope.newTransaction = { name: '', amount: 0 }; |
2 |
|
3 |
$scope.addTransaction = function addTransaction() { |
4 |
$scope.newTransaction.customer_id = $scope.customer.id; |
5 |
Data.addTransaction($scope.newTransaction).success(transactionAddSuccess).error(transactionAddError); |
6 |
}
|
7 |
|
8 |
function transactionAddSuccess(data) { |
9 |
$scope.error = null; |
10 |
data.amount = parseFloat(data.amount); |
11 |
$scope.transactions.push(data); |
12 |
|
13 |
$scope.sum += data.amount; |
14 |
$scope.newTransaction = { name: '', amount: 0 }; |
15 |
}
|
16 |
|
17 |
function transactionAddError(data) { |
18 |
$scope.error = data; |
19 |
}
|
Satu-satunya perbedaan adalah kita menambahkan id pelanggan ke data sehingga server mengetahui transaksi siapa itu. Callback success juga sedikit dimodifikasi, karena kita harus mengurai float sebelum menambahkannya ke $scope dan kita harus menambahkan jumlah tersebut ke jumlah kita.
Menghapus Transaksi
Kode untuk fungsi removeTransaction() hampir sama dengan removeCustomer yang berbeda hanya pada nama variabel:
1 |
$scope.removeTransaction = function removeTransaction(id) { |
2 |
if (confirm('Do you really want to remove this transaction?')) { |
3 |
Data.removeTransaction(id).success(transactionRemoveSuccess); |
4 |
}
|
5 |
}
|
6 |
|
7 |
function transactionRemoveSuccess(data) { |
8 |
var i = $scope.transactions.length; |
9 |
while (i--) { |
10 |
if ($scope.transactions[i].id == data) { |
11 |
$scope.sum -= $scope.transactions[i].amount; |
12 |
$scope.transactions.splice(i, 1); |
13 |
}
|
14 |
}
|
15 |
}
|
Hasilnya
Controller keseluruhan harus terlihat seperti ini:
1 |
app.controller('CustomerController', function CustomerController($scope, $routeParams, Data) { |
2 |
Data.getCustomer($routeParams.id).success(parseCustomer); |
3 |
|
4 |
function parseCustomer(data) { |
5 |
$scope.customer = data; |
6 |
}
|
7 |
|
8 |
Data.getTransactions($routeParams.id).success(parseCustomersTransactions); |
9 |
|
10 |
function parseCustomersTransactions(data) { |
11 |
$scope.transactions = data; |
12 |
$scope.sum = 0; |
13 |
for (var k in data) { |
14 |
$scope.sum += parseFloat(data[k].amount); |
15 |
}
|
16 |
}
|
17 |
|
18 |
$scope.newTransaction = { name: '', amount: 0 }; |
19 |
|
20 |
$scope.addTransaction = function addTransaction() { |
21 |
$scope.newTransaction.customer_id = $scope.customer.id; |
22 |
Data.addTransaction($scope.newTransaction).success(transactionAddSuccess).error(transactionAddError); |
23 |
}
|
24 |
|
25 |
function transactionAddSuccess(data) { |
26 |
$scope.error = null; |
27 |
data.amount = parseFloat(data.amount); |
28 |
$scope.transactions.push(data); |
29 |
|
30 |
$scope.sum += data.amount; |
31 |
$scope.newTransaction = { name: '', amount: 0 }; |
32 |
}
|
33 |
|
34 |
function transactionAddError(data) { |
35 |
$scope.error = data; |
36 |
}
|
37 |
|
38 |
$scope.removeTransaction = function removeTransaction(id) { |
39 |
if (confirm('Do you really want to remove this transaction?')) { |
40 |
Data.removeTransaction(id).success(transactionRemoveSuccess); |
41 |
}
|
42 |
}
|
43 |
|
44 |
function transactionRemoveSuccess(data) { |
45 |
var i = $scope.transactions.length; |
46 |
while (i--) { |
47 |
if ($scope.transactions[i].id == data) { |
48 |
$scope.sum -= $scope.transactions[i].amount; |
49 |
$scope.transactions.splice(i, 1); |
50 |
}
|
51 |
}
|
52 |
}
|
53 |
});
|
Template Pelanggan
Template untuk pelanggan tunggal tidak memiliki arahan Angular yang baru, jadi buat saja sebuah file bernama customer.html di public/templates/ dan letakkan kode ini di sana:
1 |
<h2>Customer Info</h2> |
2 |
<p>Name: <strong>{{ customer.first_name }} {{ customer.last_name }}</strong></p> |
3 |
<p>E-mail: <strong>{{ customer.email }}</strong></p> |
4 |
|
5 |
<h3>Transactions List</h3> |
6 |
<table>
|
7 |
<thead>
|
8 |
<tr>
|
9 |
<th width="25">ID</th> |
10 |
<th width="*">Name</th> |
11 |
<th width="85">Amount</th> |
12 |
<th width="160">Date</th> |
13 |
</tr>
|
14 |
</thead>
|
15 |
<tbody>
|
16 |
<tr ng-repeat="transaction in transactions"> |
17 |
<td>{{ transaction.id }}</td> |
18 |
<td><a ng-click="removeTransaction({{ transaction.id }})">[-]</a> {{ transaction.name }}</td> |
19 |
<td>${{ transaction.amount.toFixed(2) }}</td> |
20 |
<td>{{ transaction.created_at }}</td> |
21 |
</tr>
|
22 |
</tbody>
|
23 |
<tfoot>
|
24 |
<tr>
|
25 |
<td></td>
|
26 |
<td><input type="text" ng-model="newTransaction.name" style="width: 99%"></td> |
27 |
<td><input type="text" ng-model="newTransaction.amount" style="width: 85px"></td> |
28 |
<td><a ng-click="addTransaction()">[+]</a></td> |
29 |
</tr>
|
30 |
<tr>
|
31 |
<td></td><td>Sum:</td><td>${{ sum.toFixed(2) }}</td> |
32 |
</tr>
|
33 |
</tfoot>
|
34 |
</table>
|
35 |
<p ng-show="error" class="error"> |
36 |
{{ error }}
|
37 |
</p>
|
Perhatikan bahwa kita menggunakan toFixed(2) untuk membulatkan float sehingga mereka hanya memiliki dua bidang desimal, karena cara Laravel menangani float di JSON.
Sekarang Anda bisa membuka browser dan klik pada salah satu pelanggan yang Anda buat. Anda harus melihat controller dan template yang sedang berjalan:
Kesimpulan
Sekarang jika Anda telah menambahkan beberapa fungsi setelah bagian pertama, termasuk di front-end harus menjadi masalah penambahan beberapa baris kode di sana sini.
Saya harap setelah selesai membaca artikel dan aplikasi Anda selesai dan bekerja, Anda akan mulai berpikir bagaimana Anda bisa membuat aplikasi satu halaman tanpa aplikasi AngularJS dan aplikasi PHP tanpa Laravel. Beritahu saya jika Anda memiliki masalah dengan kerangka kerja apa pun yang disajikan di sini.
