Mengatasi Content Security Policy (CSP) blocked the loading of a resource

Error "Content Security Policy (CSP) blocked the loading of a resource" terjadi karena browser membatasi akses ke sumber daya eksternal atau permintaan AJAX karena aturan keamanan yang diterapkan di server atau header halaman.

Cara Mengatasinya

Berikut beberapa solusi yang bisa dicoba:

1. Pastikan Fetch API Menggunakan URL yang Benar

• Jika search_barang.php ada di server yang sama, gunakan relatif path seperti ini:

  fetch('search_barang.php?q=' + encodeURIComponent(keyword))
  

• Jika search_barang.php ada di domain lain, maka bisa terblokir oleh CSP.

---

2. Cek dan Edit Content Security Policy (CSP) di Server

Jika menggunakan Apache, buka atau edit file .htaccess di root proyek:

Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;"

Jika menggunakan Nginx, edit konfigurasi nginx.conf:

add_header Content-Security-Policy "default-src 'self' data: 'unsafe-inline' 'unsafe-eval';";

Restart server setelah mengubah konfigurasi.

---

3. Pastikan Server Mengizinkan CORS (Cross-Origin Resource Sharing)

Buka file search_barang.php, lalu tambahkan di bagian paling atas:

<?php
header('Access-Control-Allow-Origin: *'); // Izinkan semua domain
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json');

Jika server hanya boleh menerima permintaan dari domain tertentu, ubah * menjadi domain yang diperbolehkan:

header('Access-Control-Allow-Origin: https://contoh.com');

---

4. Pastikan Halaman Tidak Dijalankan Secara Langsung dari File Lokal

Jika menjalankan index.html langsung dari file lokal (file:///C:/...), maka AJAX tidak akan berjalan karena kebijakan keamanan browser.
Solusinya: Gunakan server lokal seperti XAMPP, WAMP, atau Live Server di VS Code.

• Jika menggunakan XAMPP, pindahkan file ke htdocs dan akses melalui http://localhost/pos/index.html.
• Jika menggunakan Live Server di VS Code, klik kanan file index.html → Open with Live Server.

---

Coba langkah-langkah di atas, lalu cek lagi di Console Browser (F12 → tab Console). Kalau masih ada error, beri tahu saya detailnya, nanti saya bantu lagi!

Read more »

Membuat Aplikasi POS dengan berbasis Web

Bagus, penggunaan kombinasi PHP, MySQL, JavaScript, dan HTML sangat cocok untuk membangun aplikasi POS yang cepat dan responsif. Berikut beberapa masukan untuk meningkatkan efisiensi aplikasi:

1. Desain Database yang Optimal

• Buat tabel dengan indeks yang tepat, terutama untuk pencarian barang (INDEX pada kolom kode_barang atau nama_barang).
• Normalisasi data agar tidak terjadi duplikasi yang tidak perlu.
• Gunakan tipe data yang efisien (misalnya, gunakan INT untuk ID daripada VARCHAR).

2. Gunakan AJAX untuk Input dan Pencarian Barang

Alih-alih melakukan reload halaman setiap kali menambahkan atau mencari barang, gunakan AJAX untuk komunikasi cepat dengan server.

• Gunakan Fetch API atau jQuery AJAX untuk mengirim data ke PHP.
• Tampilkan hasil pencarian barang secara real-time dengan JavaScript dan JSON.

Contoh AJAX untuk pencarian barang:

<input type="text" id="search" placeholder="Cari barang...">
<div id="result"></div>

<script>
document.getElementById('search').addEventListener('keyup', function() {
    let keyword = this.value;
    if (keyword.length > 2) { 
        fetch('search_barang.php?q=' + keyword)
            .then(response => response.json())
            .then(data => {
                let output = '';
                data.forEach(barang => {
                    output += `<p>${barang.nama_barang} - Rp${barang.harga}</p>`;
                });
                document.getElementById('result').innerHTML = output;
            });
    } else {
        document.getElementById('result').innerHTML = '';
    }
});
</script>

PHP (search_barang.php)

<?php
include 'koneksi.php'; // Pastikan koneksi ke database sudah benar
$q = $_GET['q'];
$query = $conn->prepare("SELECT * FROM barang WHERE nama_barang LIKE ?");
$query->execute(["%$q%"]);
echo json_encode($query->fetchAll(PDO::FETCH_ASSOC));
?>

3. Gunakan Local Storage untuk Draft Transaksi

Jika koneksi internet/server lambat, simpan sementara data transaksi di LocalStorage sebelum dikirim ke server.

let cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push({ id: 1, nama: "Barang A", harga: 10000, qty: 1 });
localStorage.setItem('cart', JSON.stringify(cart));

4. Gunakan DataTables untuk Tabel Barang

Pakai DataTables.js agar tabel barang bisa dipaginasi dan memiliki pencarian real-time tanpa reload.

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    $('#tabelBarang').DataTable();
});
</script>

5. Pertimbangkan PWA (Progressive Web App)

Supaya bisa dipakai offline, pertimbangkan membuat POS sebagai PWA dengan Service Worker untuk caching data.

---

Dengan pendekatan ini, aplikasi POS kamu akan lebih ringan, cepat, dan user-friendly. Jika ada pertanyaan atau ingin fitur tambahan, silakan tanyakan!

Read more »