{"id":5752,"date":"2026-07-07T13:53:18","date_gmt":"2026-07-07T06:53:18","guid":{"rendered":"https:\/\/arpus.acehprov.go.id\/?page_id=5752"},"modified":"2026-07-07T13:53:20","modified_gmt":"2026-07-07T06:53:20","slug":"opac","status":"publish","type":"page","link":"https:\/\/arpus.acehprov.go.id\/?page_id=5752","title":{"rendered":"OPAC"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\" defer><\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<div x-data=\"opacSearch()\" class=\"antialiased bg-gray-50 min-h-screen py-8 px-4 sm:px-6 lg:px-8\">\n    <div class=\"max-w-4xl mx-auto\">\n        \n        <div class=\"text-center mb-10\">\n            <h1 class=\"text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight mb-2\">\n                &#x1f4d6; OPAC Perpustakaan\n            <\/h1>\n            <p class=\"text-sm sm:text-base text-gray-600\">Cari katalog buku secara online, cepat, dan mudah.<\/p>\n        <\/div>\n\n        <div class=\"bg-white rounded-2xl shadow-sm p-4 sm:p-6 mb-8 border border-gray-100\">\n            <form @submit.prevent=\"fetchBooks()\" class=\"flex flex-col sm:flex-row gap-3\">\n                <div class=\"relative flex-grow\">\n                    <span class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400\">\n                        &#x1f50d;\n                    <\/span>\n                    <input \n                        type=\"text\" \n                        x-model=\"searchQuery\"\n                        placeholder=\"Ketik judul buku, penulis, atau ISBN...\" \n                        class=\"w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm outline-none transition-all\"\n                    >\n                <\/div>\n                <button \n                    type=\"submit\" \n                    class=\"w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-3 rounded-xl text-sm transition-colors shadow-sm\"\n                >\n                    Cari Buku\n                <\/button>\n            <\/form>\n        <\/div>\n\n        <div x-show=\"isLoading\" class=\"text-center py-12\">\n            <div class=\"inline-block animate-spin rounded-full h-8 w-8 border-4 border-indigo-500 border-t-transparent mb-2\"><\/div>\n            <p class=\"text-gray-500 text-sm\">Sedang mencari buku&#8230;<\/p>\n        <\/div>\n\n        <div x-show=\"!isLoading &#038;&#038; books.length === 0 &#038;&#038; hasSearched\" class=\"text-center py-12 bg-white rounded-2xl border border-dashed border-gray-200\">\n            <p class=\"text-gray-500 text-sm font-medium\">Buku tidak ditemukan. Coba kata kunci lain.<\/p>\n        <\/div>\n\n        <div x-show=\"!isLoading &#038;&#038; books.length > 0&#8243; class=&#8221;grid grid-cols-1 sm:grid-cols-2 gap-4&#8243;>\n            <template x-for=\"book in books\" :key=\"book.id\">\n                <div class=\"bg-white rounded-2xl shadow-sm p-5 border border-gray-100 hover:shadow-md transition-shadow flex flex-col justify-between\">\n                    <div>\n                        <span class=\"inline-block bg-indigo-50 text-indigo-700 text-xs px-2.5 py-1 rounded-full font-semibold mb-3\" x-text=\"book.kategori || 'Umum'\"><\/span>\n                        <h3 class=\"font-bold text-gray-900 text-base mb-1 line-clamp-2\" x-text=\"book.judul\"><\/h3>\n                        <p class=\"text-xs text-gray-500 mb-4\">Oleh: <span class=\"font-medium text-gray-700\" x-text=\"book.penulis\"><\/span><\/p>\n                    <\/div>\n                    \n                    <div class=\"border-t border-gray-50 pt-3 mt-3 flex justify-between items-center text-xs text-gray-500\">\n                        <div>Penerbit: <span x-text=\"book.penerbit || '-'\"><\/span><\/div>\n                        <div class=\"font-mono text-gray-400\" x-text=\"'ISBN: ' + (book.isbn || '-')\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/template>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\nfunction opacSearch() {\n    return {\n        \/\/ --- KONFIGURASI SUPABASE ---\n        \/\/ Ganti dengan URL dan Anon Key proyek Supabase Anda sendiri\n        supabaseUrl: 'https:\/\/XYZ_PROJECT_ID.supabase.co', \n        supabaseKey: 'EY_YOUR_ANON_KEY_HERE',\n        \n        searchQuery: '',\n        books: [],\n        isLoading: false,\n        hasSearched: false,\n\n        async fetchBooks() {\n            if (!this.searchQuery.trim()) return;\n            \n            this.isLoading = true;\n            this.hasSearched = true;\n            \n            \/\/ Menggunakan fitur pencarian teks 'ilike' (case-insensitive) pada tabel bernama 'buku'\n            \/\/ Mencari kecocokan pada kolom 'judul' atau 'penulis'\n            const endpoint = `${this.supabaseUrl}\/rest\/v1\/buku?or=(judul.ilike.*${this.searchQuery}*,penulis.ilike.*${this.searchQuery}*)&select=*`;\n            \n            try {\n                const response = await fetch(endpoint, {\n                    method: 'GET',\n                    headers: {\n                        'apikey': this.supabaseKey,\n                        'Authorization': `Bearer ${this.supabaseKey}`,\n                        'Content-Type': 'application\/json'\n                    }\n                });\n                \n                if (response.ok) {\n                    this.books = await response.json();\n                } else {\n                    console.error('Gagal mengambil data:', response.statusText);\n                    this.books = [];\n                }\n            } catch (error) {\n                console.error('Terjadi kesalahan jaringan:', error);\n                this.books = [];\n            } finally {\n                this.isLoading = false;\n            }\n        }\n    }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>&#x1f4d6; OPAC Perpustakaan Cari katalog buku secara online, cepat, dan mudah. &#x1f50d; Cari Buku Sedang mencari buku&#8230; Buku tidak ditemukan.&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5752","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P7EXk0-1uM","_links":{"self":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/5752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5752"}],"version-history":[{"count":1,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/5752\/revisions"}],"predecessor-version":[{"id":5753,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/5752\/revisions\/5753"}],"wp:attachment":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}