BAGIAN D — Axios Base URL (Laravel 12 Friendly)
13. Konfigurasi Axios Global
Buat file src/plugins/axios.js:
import axios from 'axios'
const api = axios.create({
baseURL: 'http://127.0.0.1:8000/api',
headers: {
'Content-Type': 'application/json'
}
})
export default apiGunakan di komponen:
import api from '../plugins/axios'BAGIAN E — CRUD Lanjutan (Edit & Delete)
14. Update Komponen Berita.vue
Tambahkan state edit:
const isEdit = ref(false)
const editId = ref(null)Ubah fungsi simpan:
const simpan = async () => {
if (isEdit.value) {
await api.put(`/berita/${editId.value}`, {
judul: judul.value,
isi: isi.value
})
} else {
await api.post('/berita', {
judul: judul.value,
isi: isi.value
})
}
judul.value = ''
isi.value = ''
isEdit.value = false
editId.value = null
loadData()
}Tambahkan fungsi edit & hapus:
const edit = (b) => {
judul.value = b.judul
isi.value = b.isi
isEdit.value = true
editId.value = b.id
}
const hapus = async (id) => {
if (confirm('Yakin hapus data?')) {
await api.delete(`/berita/${id}`)
loadData()
}
}15. Update Template Berita.vue
<ul>
<li v-for="b in beritas" :key="b.id">
<b>{{ b.judul }}</b><br />
{{ b.isi }}
<br />
<button @click="edit(b)">Edit</button>
<button @click="hapus(b.id)">Hapus</button>
</li>
</ul>BAGIAN F — Testing CRUD
16. Skenario Uji
- Tambah data ✔
- Edit data ✔
- Hapus data ✔
- Data berubah di database ✔
