MAGANG_TB_dan_PNP_2023/Aplikasi_Rekber
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tambahan ambil foto

Browse Source
This commit is contained in:
Muhammad Raihan Surya 2023-12-11 10:53:14 +07:00
parent 7034f1a669
commit e700439ecf
4 changed files with 156 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Http/Controllers/Login/LoginController.php
View File

@ -94,6 +94,7 @@ class LoginController extends Controller
public function register(Request $request) public function register(Request $request)
{ {
// return response()->json($request->all());
$request->validate( $request->validate(
[ [
'nama_depan' => ['required'], 'nama_depan' => ['required'],
@ -159,7 +160,7 @@ class LoginController extends Controller
'nohp.required' => 'No HP harus dimasukan.', 'nohp.required' => 'No HP harus dimasukan.',
'nohp.min' => 'No HP memiliki minimal 10 angka.', 'nohp.min' => 'No HP memiliki minimal 10 angka.',
'verification_status.boolean' => 'Masa berlaku kode verifikasi sudah habis. Silahkan lakukan verifikasi lagi.', 'verification_status.in' => 'Masa berlaku kode verifikasi sudah habis. Silahkan lakukan verifikasi lagi.',
], ],
); );

133
public/assets/js/login_register/app.js
View File

@ -128,6 +128,8 @@ document.addEventListener("DOMContentLoaded", function () {
const startButtonKtp = document.getElementById("startButtonKtp"); const startButtonKtp = document.getElementById("startButtonKtp");
const refreshButtonKtp = document.getElementById("refreshButtonKtp"); const refreshButtonKtp = document.getElementById("refreshButtonKtp");
const imageHolderKtp = document.getElementById("imageHolderKtp"); const imageHolderKtp = document.getElementById("imageHolderKtp");
const selectImageKtp = document.getElementById("gambarKtp");
const inputImageKtp = document.getElementById("ambilKtp");
const videoElementEkyc = document.getElementById("webcamEkyc"); const videoElementEkyc = document.getElementById("webcamEkyc");
const captureButtonEkyc = document.getElementById("captureButtonEkyc"); const captureButtonEkyc = document.getElementById("captureButtonEkyc");
@ -135,6 +137,8 @@ document.addEventListener("DOMContentLoaded", function () {
const startButtonEkyc = document.getElementById("startButtonEkyc"); const startButtonEkyc = document.getElementById("startButtonEkyc");
const refreshButtonEkyc = document.getElementById("refreshButtonEkyc"); const refreshButtonEkyc = document.getElementById("refreshButtonEkyc");
const imageHolderEkyc = document.getElementById("imageHolderEkyc"); const imageHolderEkyc = document.getElementById("imageHolderEkyc");
const selectImageEkyc = document.getElementById("gambarEkyc");
const inputImageEkyc = document.getElementById("ambilEkyc");
// Inisialisasi status kamera // Inisialisasi status kamera
let ktpStream = null; let ktpStream = null;
@ -175,6 +179,8 @@ document.addEventListener("DOMContentLoaded", function () {
} }
startButtonKtp.addEventListener("click", function () { startButtonKtp.addEventListener("click", function () {
clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp"));
if (ktpStream) { if (ktpStream) {
// Matikan kamera jika sudah aktif // Matikan kamera jika sudah aktif
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp); turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
@ -186,6 +192,7 @@ document.addEventListener("DOMContentLoaded", function () {
ktpStream = null; ktpStream = null;
imageHolderKtp.style.display = "block"; imageHolderKtp.style.display = "block";
captureButtonKtp.style.display = "none"; captureButtonKtp.style.display = "none";
selectImageKtp.style.display = "block";
} else { } else {
// Aktifkan kamera jika belum aktif // Aktifkan kamera jika belum aktif
navigator.mediaDevices navigator.mediaDevices
@ -195,6 +202,7 @@ document.addEventListener("DOMContentLoaded", function () {
turnOnCamera(ktpStream, videoElementKtp, startButtonKtp); turnOnCamera(ktpStream, videoElementKtp, startButtonKtp);
imageHolderKtp.style.display = "none"; imageHolderKtp.style.display = "none";
captureButtonKtp.style.display = "block"; captureButtonKtp.style.display = "block";
selectImageKtp.style.display = "none";
}) })
.catch(function (error) { .catch(function (error) {
Swal.fire({ Swal.fire({
@ -207,6 +215,8 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
startButtonEkyc.addEventListener("click", function () { startButtonEkyc.addEventListener("click", function () {
clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc"));
if (ekycStream) { if (ekycStream) {
// Matikan kamera jika sudah aktif // Matikan kamera jika sudah aktif
turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc); turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
@ -218,6 +228,7 @@ document.addEventListener("DOMContentLoaded", function () {
ekycStream = null; ekycStream = null;
imageHolderEkyc.style.display = "block"; imageHolderEkyc.style.display = "block";
captureButtonEkyc.style.display = "none"; captureButtonEkyc.style.display = "none";
selectImageEkyc.style.display = "block";
} else { } else {
// Aktifkan kamera jika belum aktif // Aktifkan kamera jika belum aktif
navigator.mediaDevices navigator.mediaDevices
@ -227,6 +238,7 @@ document.addEventListener("DOMContentLoaded", function () {
turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc); turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc);
imageHolderEkyc.style.display = "none"; imageHolderEkyc.style.display = "none";
captureButtonEkyc.style.display = "block"; captureButtonEkyc.style.display = "block";
selectImageEkyc.style.display = "none";
}) })
.catch(function (error) { .catch(function (error) {
Swal.fire({ Swal.fire({
@ -265,6 +277,7 @@ document.addEventListener("DOMContentLoaded", function () {
refreshButtonKtp.style.display = "none"; refreshButtonKtp.style.display = "none";
captureButtonKtp.style.display = "block"; captureButtonKtp.style.display = "block";
startButtonKtp.style.display = "block"; startButtonKtp.style.display = "block";
selectImageKtp.style.display = "none";
}); });
refreshButtonEkyc.addEventListener("click", function () { refreshButtonEkyc.addEventListener("click", function () {
@ -294,8 +307,22 @@ document.addEventListener("DOMContentLoaded", function () {
refreshButtonEkyc.style.display = "none"; refreshButtonEkyc.style.display = "none";
captureButtonEkyc.style.display = "block"; captureButtonEkyc.style.display = "block";
startButtonEkyc.style.display = "block"; startButtonEkyc.style.display = "block";
selectImageEkyc.style.display = "none";
}); });
function dataURLtoBlob(dataURL) {
const byteString = atob(dataURL.split(",")[1]);
const mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
captureButtonKtp.addEventListener("click", function () { captureButtonKtp.addEventListener("click", function () {
if (ktpStream) { if (ktpStream) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -323,6 +350,7 @@ document.addEventListener("DOMContentLoaded", function () {
refreshButtonKtp.style.display = "block"; refreshButtonKtp.style.display = "block";
captureButtonKtp.style.display = "none"; captureButtonKtp.style.display = "none";
startButtonKtp.style.display = "none"; startButtonKtp.style.display = "none";
selectImageKtp.style.display = "block";
} }
}); });
@ -353,53 +381,96 @@ document.addEventListener("DOMContentLoaded", function () {
refreshButtonEkyc.style.display = "block"; refreshButtonEkyc.style.display = "block";
captureButtonEkyc.style.display = "none"; captureButtonEkyc.style.display = "none";
startButtonEkyc.style.display = "none"; startButtonEkyc.style.display = "none";
selectImageEkyc.style.display = "block";
} }
}); });
//gambar untuk foto wajah // gambar untuk foto wajah
var uploadInput = document.getElementById('fotoEkyc'); inputImageKtp.addEventListener("change", function (event) {
var imageHolder = document.getElementById('imageHolderEkyc'); const file = event.target.files[0];
var gambarButton = document.getElementById('gambarEkyc'); imageHolderKtp.style.display = "none";
gambarButton.addEventListener('click', function() {
uploadInput.click();
});
uploadInput.addEventListener('change', function(event) {
var file = event.target.files[0];
if (file) { if (file) {
var reader = new FileReader(); const reader = new FileReader();
reader.onload = function() {
imageHolder.src = reader.result; // Mengubah sumber gambar pada elemen img dengan ID imageHolderEkyc reader.onload = function (event) {
const imageDataUrl = event.target.result;
// Buat elemen gambar sementara
const img = new Image();
img.onload = function () {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// Set ukuran canvas sesuai dengan gambar
canvas.width = img.width;
canvas.height = img.height;
// Gambar gambar ke dalam canvas
ctx.drawImage(img, 0, 0);
// Ambil data URL dalam format JPEG dari canvas
const fotoDataUrl = canvas.toDataURL("image/jpeg");
const fotoPreview =
document.getElementById("foto-preview-ktp");
fotoPreview.innerHTML =
'<img src="' + fotoDataUrl + '" alt="Foto">';
fotoInputKtp.value = fotoDataUrl;
};
// Set data URL gambar ke elemen gambar
img.src = imageDataUrl;
}; };
reader.readAsDataURL(file); // Membaca file gambar sebagai URL data reader.readAsDataURL(file);
} }
}); });
//gambar foto ktp inputImageEkyc.addEventListener("change", function (event) {
var uploadInput = document.getElementById('fotoKtp'); const file = event.target.files[0];
var imageHolder = document.getElementById('imageHolderKtp'); imageHolderEkyc.style.display = "none";
var gambarButton = document.getElementById('gambarKtp');
gambarButton.addEventListener('click', function() {
uploadInput.click();
});
uploadInput.addEventListener('change', function(event) {
var file = event.target.files[0];
if (file) { if (file) {
var reader = new FileReader(); const reader = new FileReader();
reader.onload = function() {
imageHolder.src = reader.result; // Mengubah sumber gambar pada elemen img dengan ID imageHolderEkyc reader.onload = function (event) {
const imageDataUrl = event.target.result;
// Buat elemen gambar sementara
const img = new Image();
img.onload = function () {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// Set ukuran canvas sesuai dengan gambar
canvas.width = img.width;
canvas.height = img.height;
// Gambar gambar ke dalam canvas
ctx.drawImage(img, 0, 0);
// Ambil data URL dalam format JPEG dari canvas
const fotoDataUrl = canvas.toDataURL("image/jpeg");
const fotoPreview =
document.getElementById("foto-preview-ekyc");
fotoPreview.innerHTML =
'<img src="' + fotoDataUrl + '" alt="Foto">';
fotoInputEkyc.value = fotoDataUrl;
};
// Set data URL gambar ke elemen gambar
img.src = imageDataUrl;
}; };
reader.readAsDataURL(file); // Membaca file gambar sebagai URL data reader.readAsDataURL(file);
} }
}); });
}); });
/****************************************** /******************************************
* END KTP & E-KYC CAMERA * END KTP & E-KYC CAMERA

1
resources/views/User/transaction/Pembeli/new-transaction.blade.php
View File

@ -391,7 +391,6 @@
icon: "error", icon: "error",
}); });
} }
console.log(error);
}, },
}); });
}); });

85
resources/views/index.blade.php
View File

@ -141,26 +141,25 @@
<div class="input-field-signup-flex"> <div class="input-field-signup-flex">
<i class="fas fa-user"></i> <i class="fas fa-user"></i>
<input type="text" placeholder="Nama Depan" class="first-name-input" <input type="text" placeholder="Nama Depan" class="first-name-input"
name="nama_depan" required /> name="nama_depan" />
</div> </div>
<div class="input-field-signup-flex" style="margin-left: 3%"> <div class="input-field-signup-flex" style="margin-left: 3%">
<i class="fas fa-user"></i> <i class="fas fa-user"></i>
<input type="text" placeholder="Nama Belakang" class="last-name-input" <input type="text" placeholder="Nama Belakang" class="last-name-input"
name="nama_belakang" required /> name="nama_belakang">
</div> </div>
</div> </div>
<div class="input-field up"> <div class="input-field up">
<i class="fa fa-id-card" aria-hidden="true"></i> <i class="fa fa-id-card" aria-hidden="true"></i>
<input type="text" placeholder="NIK" class="email-input" name="nik" <input type="text" placeholder="NIK" class="email-input" name="nik"
maxlength="16" maxlength="16"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 16);" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 16);" />
required />
</div> </div>
<div class="flex-input-btn"> <div class="flex-input-btn">
<div class="input"> <div class="input">
<i class="fa fa-envelope" aria-hidden="true"></i> <i class="fa fa-envelope" aria-hidden="true"></i>
<input type="email" placeholder="Email" class="email-input" name="new_email" <input type="email" placeholder="Email" class="email-input" name="new_email"
id="newEmail" required /> id="newEmail">
</div> </div>
<button id="verifikasiEmail" class="btn-otp" type="button" <button id="verifikasiEmail" class="btn-otp" type="button"
disabled=true>Verifikasi</button> disabled=true>Verifikasi</button>
@ -169,20 +168,20 @@
<i class="fa fa-ellipsis-h" aria-hidden="true"></i> <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
<input type="text" class="telp-input-signup" <input type="text" class="telp-input-signup"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
placeholder="Kode Verifikasi Email" name="email_verification" required placeholder="Kode Verifikasi Email" name="email_verification"
id="emailVerification"> id="emailVerification">
</div> </div>
<div class="input-field up"> <div class="input-field up">
<i class="fa fa-phone" aria-hidden="true"></i> <i class="fa fa-phone" aria-hidden="true"></i>
<input type="text" class="telp-input-signup" maxlength="13" <input type="text" class="telp-input-signup" maxlength="13"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 15);" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 15);"
placeholder="Nomer Telepon. cth: 08xxx" name="nohp" required> placeholder="Nomer Telepon. cth: 08xxx" name="nohp">
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div class="input-field-signup-flex up gender-select-menu" style="width: 190%"> <div class="input-field-signup-flex up gender-select-menu" style="width: 190%">
<div class="gender-select-input" style="width: 100%; padding-left: 1rem;"> <div class="gender-select-input" style="width: 100%; padding-left: 1rem;">
<select style="width: 190%;" class="gender-select" id="gender-select" <select style="width: 190%;" class="gender-select" id="gender-select"
name="gender" required> name="gender">
<option value="Laki-laki">Laki-laki</option> <option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option> <option value="Perempuan">Perempuan</option>
</select> </select>
@ -190,8 +189,7 @@
</div> </div>
<div class="input-field-signup-flex up" style="margin-left: 3%"> <div class="input-field-signup-flex up" style="margin-left: 3%">
<i class="fa fa-calendar" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i>
<input type="date" placeholder="Tanggal Lahir" name="tanggal_lahir" <input type="date" placeholder="Tanggal Lahir" name="tanggal_lahir" />
required />
</div> </div>
</div> </div>
@ -230,14 +228,14 @@
<select id="selectVillage" <select id="selectVillage"
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;" style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
class="input-field" aria-label="Default select example" class="input-field" aria-label="Default select example"
name="village_code" required> name="village_code">
</select> </select>
</div> </div>
</div> </div>
<input type="text" class="input-field" id="alamat" name="alamat" <input type="text" class="input-field" id="alamat" name="alamat"
placeholder="Alamat lengkap Anda" cols="50" rows="4" placeholder="Alamat lengkap Anda" cols="50" rows="4"
style="width: 190%; padding: 0rem 1rem;" required> style="width: 190%; padding: 0rem 1rem;">
</div> </div>
<!-- ======= END FORM ADDRESS ======= --> <!-- ======= END FORM ADDRESS ======= -->
@ -246,7 +244,7 @@
<div class="slider-container"> <div class="slider-container">
<div class="slider"> <div class="slider">
<div class="slide fade"> <div class="slide fade">
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center;">
<h3 style="">Foto KTP Anda</h3> <h3 style="">Foto KTP Anda</h3>
<div class="image-holder-ktp"> <div class="image-holder-ktp">
<img src="{{ asset('assets/images/dashboard/Asset 3.png') }}" <img src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
@ -254,12 +252,15 @@
</div> </div>
<video id="webcamKtp" autoplay playsinline></video> <video id="webcamKtp" autoplay playsinline></video>
<div id="foto-preview-ktp"></div> <div id="foto-preview-ktp"></div>
<input type="file" id="fotoKtp" name="wajah" accept="image/*" required style="display: none"> <input type="hidden" id="fotoKtp" name="ktp"
<div style="display: flex; margin-top: 1rem; gap:10px"> style="display: none;">
<div style="display: flex; margin-top: 1rem; gap:10px;">
<button type="button" class="btn-foto" id="startButtonKtp" <button type="button" class="btn-foto" id="startButtonKtp"
data-state="off">Mulai Kamera</button> data-state="off">Mulai Kamera</button>
<button type="button" class="btn-foto" id="gambarKtp" <label for="ambilKtp" class="btn-foto text-center" id="gambarKtp"
data-state="off">pilih Gambar</button> data-state="off">Pilih Gambar KTP<input type="file"
id="ambilKtp" accept="image/*"
style="display: none;"></label>
<button type="button" class="btn-foto" <button type="button" class="btn-foto"
id="captureButtonKtp">Ambil Foto</button> id="captureButtonKtp">Ambil Foto</button>
<button type="button" class="btn-foto" <button type="button" class="btn-foto"
@ -268,22 +269,23 @@
</div> </div>
</div> </div>
<div class="slide fade"> <div class="slide fade">
<div <div style="display: flex; flex-direction: column; align-items: center;">
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
<h3>Foto Wajah Anda</h3> <h3>Foto Wajah Anda</h3>
<div class="image-holder-ekyc"> <div class="image-holder-ekyc">
<img class="image-holder-ekyc" <img src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
alt="logo ambil gambar" id="imageHolderEkyc"> alt="logo ambil gambar" id="imageHolderEkyc">
</div> </div>
<video id="webcamEkyc" autoplay playsinline></video> <video id="webcamEkyc" autoplay playsinline></video>
<div id="foto-preview-ekyc"></div> <div id="foto-preview-ekyc"></div>
<input type="file" id="fotoEkyc" name="wajah" accept="image/*" required style="display: none"> <input type="hidden" id="fotoEkyc" name="wajah" accept="image/*"
<div style="display: flex; margin-top: 1rem gap: 10px"> style="display: none;">
<div style="display: flex; margin-top: 1rem; gap: 10px;">
<button type="button" class="btn-foto" id="startButtonEkyc" <button type="button" class="btn-foto" id="startButtonEkyc"
data-state="off">Mulai Kamera</button> data-state="off">Mulai Kamera</button>
<button type="button" class="btn-foto" id="gambarEkyc" <label for="ambilEkyc" class="btn-foto text-center"
data-state="off">Pilih gambar</button> id="gambarEkyc" data-state="off">Pilih Foto Wajah<input
type="file" id="ambilEkyc" accept="image/*"
style="display: none;"></label>
<button type="button" class="btn-foto" <button type="button" class="btn-foto"
id="captureButtonEkyc">Ambil Foto</button> id="captureButtonEkyc">Ambil Foto</button>
<button type="button" class="btn-foto" <button type="button" class="btn-foto"
@ -310,12 +312,12 @@
<div class="input-field-signup-flex"> <div class="input-field-signup-flex">
<i class="fa fa-unlock-alt" aria-hidden="true"></i> <i class="fa fa-unlock-alt" aria-hidden="true"></i>
<input type="password" class="pin-input" placeholder="Password" <input type="password" class="pin-input" placeholder="Password"
name="new_password" required> name="new_password">
</div> </div>
<div class="input-field-signup-flex" style="margin-left: 3%"> <div class="input-field-signup-flex" style="margin-left: 3%">
<i class="fa fa-unlock-alt" aria-hidden="true"></i> <i class="fa fa-unlock-alt" aria-hidden="true"></i>
<input type="password" class="konfir-pin-input" <input type="password" class="konfir-pin-input"
placeholder="Konfirmasi Password" name="confirm_password" required> placeholder="Konfirmasi Password" name="confirm_password">
</div> </div>
</div> </div>
@ -665,17 +667,34 @@
confirmButtonText: 'OK', confirmButtonText: 'OK',
}).then(function() { }).then(function() {
if (response.status) { if (response.status) {
console.log(response);
location.reload(); location.reload();
} }
}); });
}, },
error: function(error) { error: function(error) {
Swal.fire({ if (error.responseJSON && error.responseJSON.errors) {
title: 'Gagal', let errorMessage = "Terdapat beberapa kesalahan:<br>";
text: 'Ada form yang kosong atau kesalahan internet. penyebab ' +
error, const errors = error.responseJSON.errors;
icon: 'error',
}); for (let key in errors) {
errorMessage += `${errors[key].join(', ')}<br>`;
}
Swal.fire({
title: "Gagal",
html: errorMessage,
icon: "error",
});
} else {
Swal.fire({
title: "Gagal",
text: "Gagal mengirimkan data karena " + error
.statusText,
icon: "error",
});
}
} }
}); });
}); });