{"id":1510,"date":"2026-02-02T13:43:10","date_gmt":"2026-02-02T13:43:10","guid":{"rendered":"https:\/\/gurututorku.com\/blog\/?p=1510"},"modified":"2026-02-05T01:13:16","modified_gmt":"2026-02-05T01:13:16","slug":"tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js","status":"publish","type":"post","link":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/","title":{"rendered":"Tutorial Laravel 12 &#8211; Membuat Web Berita berbasis API &#8211; Bagian #1 (Backend Laravel dan Frontend Vue.js)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Materi ini cocok untuk membangun aplikasi web modern menggunakan <strong>Laravel sebagai Backend (API)<\/strong> dan <strong>Vue.js sebagai Frontend<\/strong>, terhubung dengan <strong>database MySQL<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Gambaran Arsitektur<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; Vue.js (Frontend) ]  ---&gt;  &#91; Laravel (REST API) ]  ---&gt;  &#91; MySQL Database ]\n        Axios                 Controller \/ Model             Tabel\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue.js: tampilan &amp; interaksi user<\/li>\n\n\n\n<li>Laravel: logika bisnis &amp; API<\/li>\n\n\n\n<li>Database: penyimpanan data<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Studi Kasus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kita akan membuat <strong>Aplikasi Manajemen Berita Sederhana<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CRUD Berita (Create, Read, Update, Delete)<\/li>\n\n\n\n<li>Backend: Laravel API<\/li>\n\n\n\n<li>Frontend: Vue.js<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tabel: <code>beritas<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>id<\/li>\n\n\n\n<li>judul<\/li>\n\n\n\n<li>isi<\/li>\n\n\n\n<li>created_at<\/li>\n\n\n\n<li>updated_at<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">BAGIAN A \u2014 BACKEND (Laravel)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Instalasi Laravel<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>composer create-project laravel\/laravel api-berita\ncd api-berita\nphp artisan serve<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Akses:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;127.0.0.1:8000<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. Konfigurasi Database<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Edit file <code>.env<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DB_DATABASE=db_berita\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Buat database <code>db_berita<\/code> di phpMyAdmin.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. Membuat Migration<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:migration create_beritas_table<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Edit file migration:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    public function up(): void\n    {\n        Schema::create('beritas', function (Blueprint $table) {\n        $table-&gt;id();\n        $table-&gt;string('judul');\n        $table-&gt;text('isi');\n        $table-&gt;timestamps();\n        });\n    }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Jalankan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan migrate<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. Membuat Model<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:model Berita<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>app\/Models\/Berita.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Berita extends Model\n{\n    protected $fillable = &#91;'judul', 'isi'];\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5. Membuat Controller API<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:controller Api\/BeritaController<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isi controller:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Http\\Controllers\\Api;\n\nuse App\\Http\\Controllers\\Controller;\n\/\/use App\\Http\\Controllers\\Api\\BeritaController;\n\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Berita;\n\nclass BeritaController extends Controller\n{\n    public function index() {\n    return Berita::all();\n    }\n\n    public function store(Request $request) {\n        return Berita::create($request->all());\n    }\n\n    public function show($id) {\n        return Berita::find($id);\n    }\n\n    public function update(Request $request, $id) {\n        $berita = Berita::find($id);\n        $berita->update($request->all());\n        return $berita;\n    }\n\n    public function destroy($id) {\n        return Berita::destroy($id);\n    }\n}\n\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">6. Routing API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Routing API di <code>routes\/web.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\Api\\BeritaController;\n\nRoute::get('\/', function () {\n    return view('welcome');\n});\n\nRoute::prefix('api')->group(function () {\n    Route::apiResource('berita', BeritaController::class);\n});\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hasil endpoint: <strong>php artisan route:list<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET    \/api\/berita\nPOST   \/api\/berita\nGET    \/api\/berita\/{id}\nPUT    \/api\/berita\/{id}\nDELETE \/api\/berita\/{id}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">BAGIAN B \u2014 FRONTEND (Vue.js)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7. Instalasi Vue.js (Vite)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create vite@latest vue-berita\ncd vue-berita\nnpm install\nnpm run dev<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">&#x2705; Pilihan yang DISARANKAN (Pemula \/ Kelas Laravel + Vue)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Saat muncul pilihan seperti ini di <code>npm create vite@latest vue-berita<\/code>, <strong>PILIH SEPERTI INI<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#x2714; Vue\n&#x2714; JavaScript\n&#x2716; TypeScript\n&#x2716; JSX Support\n&#x2714; Router (SPA development)\n&#x2716; Pinia (state management)\n&#x2716; Vitest (unit testing)\n&#x2716; End-to-End Testing\n&#x2716; Linter\n&#x2716; Prettier<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Router (SPA development) \u2192 &#x2705; WAJIB<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Kenapa?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hampir semua web modern butuh halaman:\n<ul class=\"wp-block-list\">\n<li><code>\/login<\/code><\/li>\n\n\n\n<li><code>\/berita<\/code><\/li>\n\n\n\n<li><code>\/dashboard<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Sangat relevan dengan Laravel API<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">8. Install Axios<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">&#x1f449; <strong>install di folder <code>vue-berita<\/code><\/strong>, <strong>BUKAN<\/strong> di root Laravel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Struktur project kita sekarang kira-kira seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>project\/\n\u251c\u2500 api-berita\/      \u2190 Laravel (Backend)\n\u2502  \u2514\u2500 composer.json\n\u2502\n\u251c\u2500 vue-berita\/      \u2190 Vue + Vite (Frontend)\n\u2502  \u251c\u2500 package.json\n\u2502  \u2514\u2500 node_modules\/<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f539; Axios itu milik siapa?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Axios = <strong>library JavaScript<\/strong><\/li>\n\n\n\n<li>Dipakai oleh <strong>Vue (Frontend)<\/strong><\/li>\n\n\n\n<li>Didaftarkan di <code>package.json<\/code> milik Vue<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">9. Struktur Komponen<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>src\/\n \u251c\u2500 components\/\n \u2502   \u2514\u2500 Berita.vue\n \u251c\u2500 App.vue<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">10. Komponen Berita.vue<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script setup&gt;\nimport { ref, onMounted } from 'vue'\nimport axios from 'axios'\n\nconst beritas = ref(&#91;])\nconst judul = ref('')\nconst isi = ref('')\n\nconst loadData = async () =&gt; {\n  const res = await axios.get('http:\/\/127.0.0.1:8000\/api\/berita')\n  beritas.value = res.data\n}\n\nconst simpan = async () =&gt; {\n  await axios.post('http:\/\/127.0.0.1:8000\/api\/berita', {\n    judul: judul.value,\n    isi: isi.value\n  })\n  judul.value = ''\n  isi.value = ''\n  loadData()\n}\n\nonMounted(loadData)\n&lt;\/script&gt;\n\n&lt;template&gt;\n  &lt;h2&gt;Manajemen Berita&lt;\/h2&gt;\n\n  &lt;input v-model=\"judul\" placeholder=\"Judul\" \/&gt;\n  &lt;textarea v-model=\"isi\" placeholder=\"Isi\"&gt;&lt;\/textarea&gt;\n  &lt;button @click=\"simpan\"&gt;Simpan&lt;\/button&gt;\n\n  &lt;ul&gt;\n    &lt;li v-for=\"b in beritas\" :key=\"b.id\"&gt;\n      &lt;b&gt;{{ b.judul }}&lt;\/b&gt;&lt;br \/&gt;\n      {{ b.isi }}\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">11. Gunakan di App.vue<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n  &lt;Berita \/&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport Berita from '.\/components\/Berita.vue'\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">BAGIAN C \u2014 Integrasi &amp; Testing<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">12. Jalankan Server<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Buka Vue \u2192 data tersimpan ke database via Laravel API.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f534; Jika Muncul Masalah tidak bisa submit<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/api\/berita \u2192 419 (unknown status)\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&#x1f449; <strong>419 = CSRF TOKEN ERROR<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel <strong>menganggap request kamu sebagai request web<\/strong>, padahal itu <strong>API dari Vue<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kenapa Ini Terjadi (Versi Mudah Dipahami)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel 12 \u2192 semua route ada di <code>web.php<\/code><\/li>\n\n\n\n<li><code>web.php<\/code> <strong>otomatis pakai middleware CSRF<\/strong><\/li>\n\n\n\n<li>Vue <strong>tidak mengirim CSRF token<\/strong><\/li>\n\n\n\n<li>Laravel menolak \u2192 <strong>419<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">&#x2705; SOLUSI RESMI &amp; BENAR (Laravel 12+)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f527; Langkah 1 \u2014 Buka file:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>bootstrap\/app.php\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f527; Langkah 2 \u2014 Cari bagian <code>withMiddleware<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Biasanya seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-&gt;withMiddleware(function (Middleware $middleware) {\n    \/\/\n})\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f527; Langkah 3 \u2014 Tambahkan CSRF Exception untuk API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ubah jadi seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>use Illuminate\\Foundation\\Configuration\\Middleware;\n\n-&gt;withMiddleware(function (Middleware $middleware) {\n    $middleware-&gt;validateCsrfTokens(except: &#91;\n        'api\/*',\n    ]);\n})\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&#x2705; <strong>SELESAI<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f504; Langkah 4 \u2014 Restart Server (WAJIB)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Refresh Vue \u2192 coba <strong>POST lagi<\/strong><br>&#x1f449; Error <strong>419 akan HILANG<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web POS (Point of Sale) adalah aplikasi berbasis web yang digunakan untuk mengelola transaksi penjualan di toko, kafe, restoran, atau bisnis retail lainnya. Sistem ini membantu kasir dalam mencatat penjualan, mengelola stok barang, mencetak struk, hingga membuat laporan penjualan secara otomatis. Karena berbasis web, POS dapat diakses dari browser tanpa instalasi, dapat digunakan di berbagai perangkat seperti laptop, tablet, atau komputer kasir.<\/p>\n","protected":false},"author":1,"featured_media":824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,38],"tags":[35,140,141,142,22,138,139,143,144],"class_list":["post-1510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-framework-laravel","category-tutorial-programming","tag-laravel-controller","tag-laravel-model","tag-laravel-route","tag-laravel-view-blade","tag-php-framework","tag-tutorial-laravel-12","tag-tutorial-laravel-migrate","tag-tutorial-laravel-mysql","tag-web-berita-laravel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku<\/title>\n<meta name=\"description\" content=\"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku\" \/>\n<meta property=\"og:description\" content=\"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Gurututorku\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-02T13:43:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T01:13:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gtadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"gtadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\"},\"author\":{\"name\":\"gtadmin\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"headline\":\"Tutorial Laravel 12 &#8211; Membuat Web Berita berbasis API &#8211; Bagian #1 (Backend Laravel dan Frontend Vue.js)\",\"datePublished\":\"2026-02-02T13:43:10+00:00\",\"dateModified\":\"2026-02-05T01:13:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\"},\"wordCount\":323,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png\",\"keywords\":[\"laravel controller\",\"laravel model\",\"laravel route\",\"laravel view blade\",\"php framework\",\"tutorial laravel 12\",\"tutorial laravel migrate\",\"tutorial laravel mysql\",\"web berita laravel\"],\"articleSection\":[\"PHP Framework Laravel\",\"Tutorial Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\",\"name\":\"Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png\",\"datePublished\":\"2026-02-02T13:43:10+00:00\",\"dateModified\":\"2026-02-05T01:13:16+00:00\",\"description\":\"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel\",\"breadcrumb\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png\",\"width\":1000,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/gurututorku.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Laravel 12 &#8211; Membuat Web Berita berbasis API &#8211; Bagian #1 (Backend Laravel dan Frontend Vue.js)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\",\"url\":\"https:\/\/gurututorku.com\/blog\/\",\"name\":\"Gurututorku - Learning today success tomorrow\",\"description\":\"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.\",\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gurututorku.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\",\"name\":\"gtadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"width\":512,\"height\":512,\"caption\":\"gtadmin\"},\"logo\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/gurututorku.com\/blog\"],\"url\":\"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku","description":"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku","og_description":"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel","og_url":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/","og_site_name":"Gurututorku","article_published_time":"2026-02-02T13:43:10+00:00","article_modified_time":"2026-02-05T01:13:16+00:00","og_image":[{"width":1000,"height":750,"url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png","type":"image\/png"}],"author":"gtadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"gtadmin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#article","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/"},"author":{"name":"gtadmin","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"headline":"Tutorial Laravel 12 &#8211; Membuat Web Berita berbasis API &#8211; Bagian #1 (Backend Laravel dan Frontend Vue.js)","datePublished":"2026-02-02T13:43:10+00:00","dateModified":"2026-02-05T01:13:16+00:00","mainEntityOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/"},"wordCount":323,"commentCount":0,"publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png","keywords":["laravel controller","laravel model","laravel route","laravel view blade","php framework","tutorial laravel 12","tutorial laravel migrate","tutorial laravel mysql","web berita laravel"],"articleSection":["PHP Framework Laravel","Tutorial Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/","url":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/","name":"Tutorial Laravel 12 - Membuat Web Berita berbasis API - Bagian #1 (Backend Laravel dan Frontend Vue.js) - Gurututorku","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png","datePublished":"2026-02-02T13:43:10+00:00","dateModified":"2026-02-05T01:13:16+00:00","description":"laravel controller, laravel model, laravel route, laravel view blade, php framework, tutorial laravel 12, tutorial laravel migrate, tutorial laravel mysql, web berita laravel","breadcrumb":{"@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#primaryimage","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/laravel.png","width":1000,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/gurututorku.com\/blog\/tutorial-laravel-12-membuat-web-berita-berbasis-api-bagian-1-backend-laravel-dan-frontend-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gurututorku.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Laravel 12 &#8211; Membuat Web Berita berbasis API &#8211; Bagian #1 (Backend Laravel dan Frontend Vue.js)"}]},{"@type":"WebSite","@id":"https:\/\/gurututorku.com\/blog\/#website","url":"https:\/\/gurututorku.com\/blog\/","name":"Gurututorku - Learning today success tomorrow","description":"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.","publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gurututorku.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2","name":"gtadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","width":512,"height":512,"caption":"gtadmin"},"logo":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/gurututorku.com\/blog"],"url":"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/comments?post=1510"}],"version-history":[{"count":6,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1510\/revisions"}],"predecessor-version":[{"id":1551,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1510\/revisions\/1551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media\/824"}],"wp:attachment":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media?parent=1510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/categories?post=1510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/tags?post=1510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}