Postingan lainnya
Gimana cara menyimpan hasil webcam dan data ke database
salam kenal, saya sedang belajar cara memasukan data dan photo dari webcam ke database, tetapi yang ke simpan hanya gambarnya saja untuk datanya keterangan kosong tidak tersimpan, mohon petujuknya. Berikut saya lampirkan kodingnya:
13 Jawaban:
Coba var_dump querynya bro,
$sql = "INSERT into test VALUES ('','$keterangan','$target')";
var_dump($sql);die();
$query = mysqli_query($conn, $sql);
Nanti hasilnya coba langsung jalankan di phpmyadmin atau tool SQL lainnya seperti Mysql Workbench.
malah ga kesimpan bro, kalo pake var_dump($sql);die(); saya lampirkan indexnya
<!doctype html>
<html>
<head>
<title>WebcamJS Test Page</title>
<style>
input {
margin-top: 10px;
}
</style>
</head>
<body>
<form method="POST" onsubmit="simpan()">
<div>
<label>Keterangan</label>
<input type="text" name="keterangan">
</div>
<div>
<input type="hidden" name="webcam" value="'data_uri'">
</div>
<p>Ambil Gambar</p>
<div id="camera">Capture</div>
<div id="webcam">
<input type=button value="Capture" onClick="preview()">
</div>
<div id="simpan" style="display:none">
<input type=button value="Remove" onClick="batal()">
<input type=button value="Save" onClick="simpan()" style="font-weight:bold;">
</div>
</form>
<div id="hasil"></div>
<script src="webcam1.js"></script>
<script language="Javascript">
// konfigursi webcam
Webcam.set({
width: 320,
height: 240,
image_format: 'jpg',
jpeg_quality: 100
});
Webcam.attach( '#camera' );
function preview() {
// untuk preview gambar sebelum di upload
Webcam.freeze();
// ganti display webcam menjadi none dan simpan menjadi terlihat
document.getElementById('webcam').style.display = 'none';
document.getElementById('simpan').style.display = '';
}
function batal() {
// batal preview
Webcam.unfreeze();
// ganti display webcam dan simpan seperti semula
document.getElementById('webcam').style.display = '';
document.getElementById('simpan').style.display = 'none';
}
function simpan() {
// ambil foto
Webcam.snap( function(data_uri) {
// upload foto
Webcam.upload( data_uri, 'upload.php', function(code, text) {} );
// tampilkan hasil gambar yang telah di ambil
document.getElementById('hasil').innerHTML =
'<p>Hasil : </p>' +
'<img src="'+data_uri+'"/>';
// '<form action="upload.php" method="post">'+
// '<label>Keterangan</label><input type="text" name="keterangan"></form>'
// ;
Webcam.unfreeze();
document.getElementById('webcam').style.display = '';
document.getElementById('simpan').style.display = 'none';
} );
}
</script>
</body>
</html>
Bro var_dump itu untuk debugger, melihat hasil apa sudah benar/tidak Saya mau tau apa nilai dari "keterangan" setelah anda panggil simpan().
Dari indexnya anda define keterangan di form, tetapi tidak ada action https://www.w3schools.com/tags/att_form_action.asp
onsubmit anda panggil simpan() diteruskan ke 'upload.php', tetapi tidak disertakan nilai 'keterangan' cuma data capture yg anda kirim (data_uri)
Asumsi saya anda memproses data menggunakan upload.php. Coba anda letakkan
var_dump($_POST);die();
dibagian atas file upload.php, apa bener ada nilai dari ['keterangan']. Karena anda memanggil
$keterangan= $_POST['keterangan'];
Kalau misalnya nilai dari $_POST['keterangan'] tidak ada, bagaimana mungkin disimpan ke database
maksud agan yang ini?
<form method="POST" action="upload.php"">
<div>
<label>Keterangan</label>
<input type="text" name="keterangan">
</div>
<div>
<input type="hidden" name="webcam" value="'data_uri'">
</div>
<p>Ambil Gambar</p>
<div id="camera">Capture</div>
<div id="webcam">
<input type=button value="Capture" onClick="preview()">
</div>
<div id="simpan" style="display:none">
<input type=button value="Remove" onClick="batal()">
<input type=button value="Save" onClick="simpan()" style="font-weight:bold;">
</div>
</form>
<?php
include "koneksi.php";
var_dump($_POST);die();
$keterangan= $_POST['keterangan'];
// $webcam= $_POST['webcam'];
$nama_file = date('YmdHis').'.jpg';
$direktori = 'uploads/';
$target = $direktori.$nama_file;
move_uploaded_file($_FILES['webcam']['tmp_name'], $target);
$sql = "INSERT into test VALUES ('','$keterangan','$target')";
// var_dump($_sql);die();
$query = mysqli_query($conn, $sql);
?>
udh benar belum gan? soalnya malah ga nyimpan ke database
Ya kurang lbh seperti itu. Tapi sepertinya anda kurang paham. die() itu akan menghentikan eksekusi script yang ada dibawahnya. Jadi script INSERT tidak akan dia jalankan otomatis ga bakal masuk database. Yg ingin kita cari tau apa aja parameter yg di $_POST,
Nilai dari $_POST['keterangan'] & $_POST['webcam'] (ada apa tidaknya di cek lewat var_dump)
nanti parameter2 yang di $_POST ini yang akan dimasukkan ke database (INSERT query)
iya bro saya kurang paham, maksudnya gemana? kasih contoh dong bro
Bukan contoh, ini pemahaman aja
Disini kita belom sampai tahap simpan database, kita cuma mau tau nilai dari keterangan dan webcam..pertanyaan anda kenapa keterangan ga tersimpan ? jd kita cari tau dulu apa memang ada nilai keterangan itu dikirim. Kalau nilainya tidak ada (NULL) otomatis ga ada yg disimpan, tetapi kalo nilai keterangan itu ada, berarti query insert databasenya yg masalah
Jadi simplenya.
1. Ketika tombol simpan diklik maka nilai keterangan & webcam dikirim untuk diproses ke server 2. Nilai dari keterangan dan webcam yg dikirim di tangkap lalu disimpan ke database
Jadi kita lakukan tangkap nilainya terus cek apa isinya (sebelum simpan ke database)
kalo ke database photo bisa ke simpan cuman keterangannya aja yg ga mau kesimpan mohon bantuannya codingnya seperti diatas file index dan uploadnya. terimakasih.
kalo saya coba pengaruh dari tombol simpannya input type (submit dan button), pengaruh ya? kalo peke submit keterangan bisa masuk kedatabase sedangkan pake botton ga bisa hanya foto aja soalnya foto pake javascrip, klo pingin simpan dua2 codingnya gmana ya?
<!doctype html>
<html>
<head>
<title>WebcamJS Test Page</title>
<style>
input {
margin-top: 10px;
}
</style>
</head>
<body>
<form id="myform" method="POST" action="upload.php">
<div>
<label>Keterangan</label>
<input type="text" name="keterangan">
</div>
<div>
<input type="hidden" name="webcam" id='mypic'>
</div>
<p>Ambil Gambar</p>
<div id="camera">Capture</div>
<div id="webcam">
<input type=button value="Capture" id="capture" onClick="preview()">
</div>
<div id="simpan" style="display:none">
<input type=button value="Remove" onClick="batal()">
<input type=button value="Save" onClick="myform.submit()" style="font-weight:bold;">
</div>
</form>
<div id="hasil"></div>
<script src="webcam1.js"></script>
<script language="Javascript">
//Saat tombol capture diklik, value dari gambar isikan ke hidden input id "mypic"
document.getElementById('capture').addEventListener("click", function() {
Webcam.snap( function(data_uri) {
document.getElementById('mypic').value = '<img src="'+data_uri+'"/>';
});
});
// konfigursi webcam
Webcam.set({
width: 320,
height: 240,
image_format: 'jpg',
jpeg_quality: 100
});
Webcam.attach( '#camera' );
function preview() {
// untuk preview gambar sebelum di upload
Webcam.freeze();
// ganti display webcam menjadi none dan simpan menjadi terlihat
document.getElementById('webcam').style.display = 'none';
document.getElementById('simpan').style.display = '';
}
function batal() {
// batal preview
Webcam.unfreeze();
// ganti display webcam dan simpan seperti semula
document.getElementById('webcam').style.display = '';
document.getElementById('simpan').style.display = 'none';
}
</script>
</body>
</html>
udh bisa masuk ke database tapi ke dalam folder photonya ga kesimpan bro, ada yg salah ga bro?
Bro, sepertinya anda perlu mempelajari dulu bagaimana cara kerja webcam.js, bagaimana UPLOAD FILE gambar dan bagaimana cara menyimpan file gambar dalam bentuk base64. Jadi anda bisa mengembangkan sendiri apa yang sudah saya sarankan. Contoh yang saya berikan barusan adalah menyimpan gambar ke database dalam format base64 (seperti permasalahan awal anda tidak bisa menyimpan ke database). Jadi bukan berupa file upload
Maaf saya hanya bisa membantu sampai disini saja
satu kali lagi gan, jadi tanggung. hehehe...