487 lines
30 KiB
PHP
487 lines
30 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
Register - Sekolah Adiwiyata
|
|
</title>
|
|
<meta name="description" content="Login">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
|
<!-- Call App Mode on ios devices -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<!-- Remove Tap Highlight on Windows Phone IE -->
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
<!-- base css -->
|
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
|
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
|
|
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
|
<!-- Optional: page related CSS-->
|
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
|
|
<link rel="stylesheet" href="{{asset('assets/css/formplugins/select2/select2.bundle.css')}}">
|
|
<style type="text/css">
|
|
.bg-login{
|
|
background-image: url("{{('assets/bg-login.png')}}");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
#result {
|
|
border: 1px solid #ccc;
|
|
display: none;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
position: absolute;
|
|
width: 80%;
|
|
z-index: 999;
|
|
padding-left: 0px;
|
|
}
|
|
#result li {
|
|
padding: 10px;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
#result li:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-login">
|
|
<div class="d-flex align-items-center justify-content-center min-vh-100">
|
|
<div class="container py-4 py-lg-5 px-4 px-sm-0">
|
|
<div class="row justify-content-center">
|
|
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
|
|
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
|
|
@include('include.alert')
|
|
<div class="row">
|
|
<div class="col-md-7 d-flex flex-column text-center">
|
|
<div class="text-center">
|
|
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
|
|
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
|
|
<div>
|
|
<img src="{{asset('assets/logo-dinas.ico')}}" width="50">
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-500">Sistem Informasi Adiwiyata</h5>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<form method="POST" action="{{url('register')}}">
|
|
{{csrf_field()}}
|
|
<div class="row">
|
|
<div id="loading-spinner" style="display: none; text-align: center;">
|
|
<img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
|
|
</div>
|
|
<div class="col-md-12 d-none">
|
|
<div class="form-group row d-none">
|
|
<label class="col-xl-12 form-label" for="fname">Provinsi</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="provinsi" class="form-control select2 @error('provinsi') provinsi is-invalid @enderror" id="provinsi">
|
|
<option value="0">- PILIH PROVINSI -</option>
|
|
@foreach($provinsi as $datProv)
|
|
<option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('provinsi')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="form-group row d-none">
|
|
<label class="col-xl-12 form-label" for="fname">Kabupaten</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="kabupaten" class="form-control select2 @error('kabupaten') kabupaten is-invalid @enderror" id="kabupaten" required>
|
|
<option value="0">- PILIH KABUPATEN/KOTA -</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row d-none">
|
|
<label class="col-xl-12 form-label" for="fname">Kecamatan</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="kecamatan" class="form-control select2 @error('kecamatan') kecamatan is-invalid @enderror" id="kecamatan" required>
|
|
<option value="0">- PILIH KECAMATAN -</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group row">
|
|
<label class="col-xl-12 form-label">Tingkat Sekolah</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="tingkat_sekolah" class="form-control tingkat_sekolah select2 @error('tingkat_sekolah') is-invalid @enderror">
|
|
<option value="">-Pilih Tingkat Sekolah-</option>
|
|
<option value="1">SD</option>
|
|
<option value="2">SMP</option>
|
|
<option value="3">SMA</option>
|
|
<option value="4">SMK</option>
|
|
<option value="5">MI</option>
|
|
<option value="6">MTs</option>
|
|
<option value="7">MA</option>
|
|
<option value="8">SD LB</option>
|
|
<option value="9">SMP LB</option>
|
|
<option value="10">SMA LM</option>
|
|
<option value="11">SLB Khusus</option>
|
|
</select>
|
|
@error('tingkat_sekolah')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-xl-12 form-label" for="fname">Nama Sekolah</label>
|
|
<div class="col-12 pr-1">
|
|
<input type="text" readonly value="{{old('name')}}" name="name" class="form-control nama_sekolah @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah">
|
|
@error('name')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="emailverify">Kontak Person</label>
|
|
<input type="text" value="{{old('kontak_person')}}" name="kontak_person" class="form-control @error('kontak_person') is-invalid @enderror" placeholder="Masukan Kontak Person" required>
|
|
@error('kontak_person')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<div class="form-group row">
|
|
<label class="col-xl-12 form-label" for="fname">NPSN</label>
|
|
<div class="col-12 pr-1">
|
|
<input maxlength="8" autocomplete="off" type="text" value="{{old('npsn')}}" name="npsn" class="form-control @error('npsn') is-invalid @enderror numberInput npsn" placeholder="Masukan NPSN">
|
|
<ul id="result"></ul>
|
|
@error('npsn')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group d-none row">
|
|
<label class="col-xl-12 form-label" for="fname">Status Sekolah</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="status_sekolah" class="form-control @error('status_sekolah') is-invalid @enderror">
|
|
<option value="" data-select2-id="3">-Pilih Status Sekolah-</option>
|
|
<option value="Negeri">Negeri</option>
|
|
<option value="Swasta">Swasta</option>
|
|
</select>
|
|
@error('status_sekolah')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="emailverify">Alamat Sekolah</label>
|
|
<input type="text" value="{{old('alamat_sekolah')}}" name="alamat_sekolah" class="form-control @error('alamat_sekolah') is-invalid @enderror" placeholder="Masukan Alamat Sekolah, Nama Jalan / Dusun / RT-RW" required>
|
|
@error('alamat_sekolah')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="emailverify">Telp/WA</label>
|
|
<input type="text" value="{{old('telp')}}" name="telp" class="form-control @error('telp') is-invalid @enderror numberInput" maxlength="16" placeholder="Masukan Telp/WA" required>
|
|
@error('telp')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-3">
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="emailverify">Email</label>
|
|
<input type="email" name="email" id="emailverify" class="form-control @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
|
|
@error('email')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
<small class="text-primary">* Pastikan email benar dan aktif, akses aplikasi akan dikirim ke email yang didaftarkan.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Password</label>
|
|
<div class="input-group">
|
|
<input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters" required>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-default waves-effect waves-themed" type="button" id="togglePassword"><i class="fal fa-eye"></i></button>
|
|
</div>
|
|
</div>
|
|
@error('password')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
<div class="help-block">
|
|
Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, <br>setidaknya 1 huruf kecil dan huruf besar, angka dan simbol
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="checkbox" name="check" required> Dengan ini menyatakan bahwa isian registrasi diatas sudah benar.
|
|
@error('check')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
<div class="row no-gutters">
|
|
<div class="col-md-12 ml-auto text-right">
|
|
<button id="js-login-btn" type="submit" class="btn btn-block btn-primary btn-lg mt-3">Registrasi</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group text-center mt-3">
|
|
<span class="">
|
|
Sudah punya akun? <a href="{{url('login')}}">Login</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group row d-none">
|
|
<label class="col-xl-12 form-label" for="fname">Sekolah</label>
|
|
<div class="col-12 pr-1">
|
|
<select name="sekolah" class="form-control select2 @error('sekolah') sekolah is-invalid @enderror" id="sekolah" required>
|
|
<option value="0">- PILIH SEKOLAH -</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
<p class="text-muted mt-auto text-center mb-0 pt-3">
|
|
{{date('Y')}} © Dinas Lingkungan Hidup DKI Jakarta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
|
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
|
|
<script src="{{asset('assets/js/formplugins/select2/select2.bundle.js')}}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.select2').select2();
|
|
$('.numberInput').on('input', function() {
|
|
this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
|
|
});
|
|
$('#togglePassword').on('click', function() {
|
|
let passwordField = $('#password');
|
|
let icon = $(this).find('i');
|
|
|
|
// Cek apakah input saat ini bertipe password
|
|
if (passwordField.attr('type') === 'password') {
|
|
passwordField.attr('type', 'text'); // Ubah ke teks
|
|
icon.removeClass('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
|
|
} else {
|
|
passwordField.attr('type', 'password'); // Ubah ke password
|
|
icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
|
|
}
|
|
});
|
|
|
|
$('.npsn').on('keyup', function(){
|
|
var query = $(this).val();
|
|
var tingkat_sekolah = $('.tingkat_sekolah').find(':selected').val();
|
|
if(query.length > 0) {
|
|
$.ajax({
|
|
url: "{{ url('sekolahNpsn') }}",
|
|
type: "GET",
|
|
data: {
|
|
query: query,
|
|
tingkat_sekolah:tingkat_sekolah
|
|
},
|
|
success: function(data) {
|
|
$('#result').html('');
|
|
if(data.length > 0) {
|
|
$('#result').show();
|
|
$.each(data, function(index, data){
|
|
$('#result').append('<li data-npsn="'+data.npsn+'">' + data.nama_sekolah + '</li>');
|
|
});
|
|
} else {
|
|
$('#result').hide();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
$('#result').hide();
|
|
}
|
|
});
|
|
|
|
// Saat klik pada hasil pencarian, isi input dan sembunyikan daftar
|
|
$(document).on('click', '#result li', function(){
|
|
var npsn = $(this).attr('data-npsn');
|
|
|
|
$('.npsn').val(npsn);
|
|
$('.nama_sekolah').val($(this).text());
|
|
$('#result').hide();
|
|
});
|
|
|
|
// Klik di luar input atau hasil pencarian untuk menyembunyikan daftar
|
|
$(document).on('click', function(e) {
|
|
if (!$(e.target).closest('.npsn, #result').length) {
|
|
$('#result').hide();
|
|
}
|
|
});
|
|
});
|
|
$("#js-login-btn").click(function(event)
|
|
{
|
|
|
|
// Fetch form to apply custom Bootstrap validation
|
|
var form = $("#js-login")
|
|
|
|
if (form[0].checkValidity() === false)
|
|
{
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
|
|
form.addClass('was-validated');
|
|
// Perform ajax submit here...
|
|
});
|
|
|
|
function clear(elementId) {
|
|
$('#' + elementId).empty();
|
|
$('#' + elementId).select2();
|
|
}
|
|
|
|
$('#sekolah').on('select2:select', function(e) {
|
|
let npsn = $(this).find(':selected').attr('data-npsn');
|
|
$('.npsn').val(npsn);
|
|
});
|
|
|
|
|
|
$('select').on("select2:selecting", function(e) {
|
|
var selectorOrigin = this.id;
|
|
var id = e.params.args.data.id;
|
|
|
|
|
|
if(selectorOrigin=='provinsi'){
|
|
$('#loading-spinner').show();
|
|
clear('kabupaten');
|
|
selector = 'kabupaten';
|
|
url_to = 'kabupaten';
|
|
getSelect(id, selector, url_to);
|
|
}
|
|
|
|
if(selectorOrigin=='kabupaten'){
|
|
$('#loading-spinner').show();
|
|
clear('kecamatan');
|
|
selector = 'kecamatan';
|
|
url_to = 'kecamatan';
|
|
getSelect(id, selector, url_to);
|
|
}
|
|
if(selectorOrigin=='kecamatan'){
|
|
$('#loading-spinner').show();
|
|
clear('sekolah');
|
|
selector = 'sekolah';
|
|
url_to = 'sekolah';
|
|
getSelect(id, selector, url_to);
|
|
}
|
|
});
|
|
|
|
function getSelect(id, selectTo, urlTo, selected = "") {
|
|
id = id;
|
|
var base_url = "{{url('/')}}";
|
|
//alert(id);
|
|
destino = "#" + selectTo;
|
|
valor = $('#' + id).find(":selected").val();
|
|
|
|
$.ajax({
|
|
method: "POST",
|
|
url: base_url + "/get/" + urlTo,
|
|
data: {
|
|
_token: '{{csrf_token()}}',
|
|
id: id
|
|
}
|
|
})
|
|
.done(function(msg) {
|
|
obj = msg.data;
|
|
|
|
if (obj.length > 0) {
|
|
//Clear the current options
|
|
$(destino).empty();
|
|
|
|
if(selectTo=='kabupaten'){
|
|
$(destino).append('<option value="">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
|
|
|
|
|
|
|
$.each(obj, function(index) {
|
|
value = obj[index].id;
|
|
text = obj[index].name;
|
|
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
|
});
|
|
console.log(selected)
|
|
if (selected) {
|
|
$(destino).val(selected).trigger('change');
|
|
selected = "";
|
|
}
|
|
}
|
|
|
|
if(selectTo=='kecamatan'){
|
|
$(destino).append('<option value="">-PILIH KECAMATAN-</option>').select2("val", "0");
|
|
|
|
$.each(obj, function(index) {
|
|
value = obj[index].id;
|
|
text = obj[index].name;
|
|
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
|
});
|
|
console.log(selected)
|
|
if (selected) {
|
|
$(destino).val(selected).trigger('change');
|
|
selected = "";
|
|
}
|
|
}
|
|
|
|
if(selectTo=='sekolah'){
|
|
$(destino).append('<option value="">-PILIH SEKOLAH-</option>').select2("val", "0");
|
|
|
|
$.each(obj, function(index) {
|
|
value = obj[index].id;
|
|
text = obj[index].name;
|
|
npsn = obj[index].npsn;
|
|
$(destino).append('<option data-npsn="'+npsn+'" value=' + value + '>' + text + '</option>');
|
|
});
|
|
console.log(selected)
|
|
if (selected) {
|
|
$(destino).val(selected).trigger('change');
|
|
selected = "";
|
|
}
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
if(selectTo=='provinsi'){
|
|
$(destino).empty().append('<option value="0">-PILIH PROVINSI-</option>').select2("val", "0");
|
|
}
|
|
if(selectTo=='kabupaten'){
|
|
$(destino).empty().append('<option value="0">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
|
}
|
|
if(selectTo=='kecamatan'){
|
|
$(destino).empty().append('<option value="0">-PILIH KECAMATAN-</option>').select2("val", "0");
|
|
}
|
|
if(selectTo=='sekolah'){
|
|
$(destino).empty().append('<option value="0">-PILIH SEKOLAH-</option>').select2("val", "0");
|
|
}
|
|
|
|
|
|
}
|
|
$('#loading-spinner').hide();
|
|
});
|
|
return false;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|