ba/SMK_Kelulusan
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated views and api

Browse Source
This commit is contained in:
Gregorio Chiko Putra 2019-05-10 15:41:21 +07:00
parent 019ac42b65
commit 4bb4e7c56b
15 changed files with 2831 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -5337,6 +5337,11 @@
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
"dev": true
},
"lodash.isempty": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
"integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

4
package.json
View File

@ -6,7 +6,9 @@
"directories": {
"test": "tests"
},
"dependencies": {},
"dependencies": {
"lodash.isempty": "^4.4.0"
},
"devDependencies": {
"cross-env": "^5.2.0",
"laravel-mix": "^4.0.15",

74
public/css/main.css vendored
View File

@ -7529,6 +7529,12 @@ video {
z-index: auto;
}
@page {
size: 8.5in 14in;
margin: 0;
}
html, body {
background-color: #e2e8f0;
color: #285e61;
@ -7668,16 +7674,26 @@ html, body {
margin-left: auto;
margin-right: auto;
padding: 0.25rem;
max-width: 66ch;
color: #000;
width: 100%;
font-size: calc(.5rem + 1vmin);
}
.letter p {
line-height: 1.1;
}
.letter .letter__header {
text-align: center;
margin-top: 1rem;
}
.letter p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
.letter .letter__header img {
width: 100%;
}
.letter .letter__body-header {
text-align: center;
}
.letter ol {
@ -7689,7 +7705,44 @@ html, body {
width: 100%;
}
.letter table td {
vertical-align: top;
padding-right: 0.5rem;
}
.letter table .strong {
font-weight: 700;
}
.letter table .special {
font-weight: 700;
letter-spacing: 0.1em;
font-size: 1.125rem;
font-style: italic;
}
.letter table.signature {
width: auto;
margin-left: auto;
margin-top: 1rem;
}
.letter table.signature .letter__sign {
width: 79%;
height: 4rem;
background-image: url("/img/letter-sign.jpg");
background-size: contain;
}
@media print {
html, body {
background-color: #fff;
}
body {
margin: 1cm;
}
.container > .header, .container > .form, .print-button {
display: none;
}
@ -7700,6 +7753,19 @@ html, body {
margin: 0;
padding: 0;
}
.letter {
font-family: "Calibri", "Source Sans Pro", sans-serif;
font-size: 12px;
}
.letter .letter__body-header {
font-size: 14px;
}
.letter table.signature .letter__sign {
height: 3.5rem;
}
}
@media (min-width: 640px) {

BIN
public/img/letter-head.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
public/img/letter-sign.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

2379
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
resources/img/letter-head.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
resources/img/letter-sign.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

265
resources/js/app.js vendored
View File

@ -0,0 +1,265 @@
import m from "mithril"
import _isEmpty from "lodash.isempty"
import Siswa from "./models/Siswa"
import AccessLog from "./models/AccessLog"
m.mount(document.body.querySelector('.container'), {
oninit: () => {
AccessLog.fetch();
},
view: () => {
console.log(_isEmpty(Siswa.current));
return [
m('span.italic.text-xs', [
'Saat ini sudah ',
m('strong', [
AccessLog.current.accessed,
' / ',
AccessLog.current.total,
]),
' siswa yang telah melihat pengumuman kelulusan.'
]),
m('.header', [
m('h1.title', 'Pengumuman Kelulusan SMK Bhakti Anindya'),
m('span', 'Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini.'),
]),
m('form.form', {
onsubmit: e => {
e.preventDefault();
Siswa.cariData({
nisn: e.target.elements.nisn.value,
tglLahir: e.target.elements.tglLahir.value,
});
}
},
m('.form-grid', [
m('.form-group', [
m('label.form-label[for=input-nisn]', 'NISN'),
m('input.form-input.input-text#input-nisn[name=nisn][type=text][autocomplete=off][required]'),
m('p.input-helper', 'Nomor Induk Siswa Nasional.'),
]),
m('.form-group', [
m('label.form-label[for=input-tglLahir]', 'Tanggal Lahir'),
m('input.form-input.input-text#input-tglLahir[name=tglLahir][type=text][autocomplete=off][required]'),
m('p.input-helper', 'Tanggal lahir dengan format YYYYMMDD. Contoh: untuk tanggal 29 Mei 2000 ditulis 20000529'),
]),
m('button.form-submit[type=submit]', 'Lihat'),
])),
m(!_isEmpty(Siswa.current) ? '.letter' : '.letter.hidden', [
m('button.print-button', {
onclick: () => {
window.print();
}
}, [
m.trust('⎙'),
' Print',
]),
m('.letter__header', [
m('img[src=img/letter-head.jpg]'),
]),
m('', {
style: {
height: '1px',
width: '100%',
backgroundColor: '#000',
marginTop: '.5rem',
}}),
m('', {
style: {
height: '3px',
width: '100%',
}}),
m('', {
style: {
height: '3px',
width: '100%',
backgroundColor: '#000',
marginBottom: '1rem',
}}),
m('.letter__body', [
m('strong.letter__body-header', [
m('p', 'KEPUTUSAN'),
m('p', 'KEPALA SEKOLAH MENENGAH KEJURUAN (SMK) BHAKTI ANINDYA'),
m('p', 'Nomor: 076 / SMK - BA / V / 2019'),
m('p', 'TENTANG'),
m('p', 'KELULUSAN PESERTA UJIAN DARI SATUAN PENDIDIKAN'),
m('p', 'TAHUN PELAJARAN 2018 / 2019'),
m('br'),
m('p', 'KEPALA SMK BHAKTI ANINDYA'),
]),
m('br'),
m('table', [
m('tr', [
m('td', 'Menimbang'),
m('td', ':'),
m('td', '1.'),
m('td[colspan=3]', 'Bahwa dalam rangka pengumuman hasil ujian akhir kelas XII Tahun Pelajaran 2018/2019 dipandang perlu untuk menerbitkan surat keputusan tentang kelulusan peserta ujian dari satuan pendidikan SMK Bhakti Anindya.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '2.'),
m('td[colspan=3]', 'Bahwa peserta ujian yang namanya tercantum pada surat keputusan ini dipandang cakap, kompeten, dan layak untuk dinyatakan lulus dari Satuan Pendidikan SMK Bhakti Anindya.'),
]),
m('br'),
m('tr', [
m('td', 'Mengingat'),
m('td', ':'),
m('td', '1.'),
m('td[colspan=3]', 'Undang Undang No. 20 Tahun 2003 tentang Sistem Pendidikan Nasional.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '2.'),
m('td[colspan=3]', 'Permendikbud Nomor 57 Tahun 2015 Tentang Penilaian Hasil Belajar Oleh Pemerintah Melalui Ujian Nasional Dan Penilaian Hasil Belajar Oleh Satuan Pendidikan Melalui Ujian Sekolah/ Madrasah/ Pendidikan Kesetaraan Pada SMP/ MTs/ Yang Sederajat Dan SMA/ MA/ SMK Atau Yang Sederajat.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '3.'),
m('td[colspan=3]', 'Peraturan BSNP NOMOR: 0047/P/BSNP/XI/2018 tentang Prosedur Operasional Standar Penyelenggaraan Ujian Nasional Tahun Pelajaran 2018/2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '4.'),
m('td[colspan=3]', 'Peraturan BSNP NOMOR: 0048/BSNP/XI/2018 tentang Prosedur Operasional Standar Penyelenggaraan Ujian Sekolah Berstandar Nasaional Tahun Pelajaran 2018/2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '5.'),
m('td[colspan=3]', 'Pedoman Penyelenggaraan UKK dan Sertifikasi Siswa SMK pada Ujian Nasional Tahun Pelajaran 2017/2018.'),
]),
m('br'),
m('tr', [
m('td', 'Memperhatikan'),
m('td', ':'),
m('td', '1.'),
m('td[colspan=3]', 'Nilat raport semester 1 – 6 Tahun Pelajaran 2016/2017 – 2018/2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '2.'),
m('td[colspan=3]', 'Nilai Hasil Ujian Praktik Kejuruan ( UPK ) yang diselenggarakan tanggal 1 April s.d 3 Mei 2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '3.'),
m('td[colspan=3]', 'Nilai Hasil Ujian Sekolah Berstandar Nasional (USBN) yang diselenggarakan tanggal 05 – 12 April 2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '4.'),
m('td[colspan=3]', 'Nilai Hasil Ujian Nasional Berbasis Komputer (UNBK) yang diselenggarakan tanggal 25 – 28 Maret 2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '5.'),
m('td[colspan=3]', 'Hasil pengamatan dan penilaian mengenai sikap, prilaku, dan kepribadian yang bersangkutan selama menjadi siswa SMK Bhakti Anindya.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '6.'),
m('td[colspan=3]', 'Hasil Rapat Pleno Dewan Guru SMK Bhakti Anindya tanggal 10 Mei 2019.'),
]),
m('tr', [
m('td[colspan=2]'),
m('td', '7.'),
m('td[colspan=3]', 'Surat Keputusan Tentang Kriteria Kelulusan dari Satuan Pendidikan.'),
]),
m('tr',
m('td.text-center[colspan=6]', 'MEMUTUSKAN :')),
m('tr', [
m('td', 'Menetapkan'),
m('td', ':'),
]),
m('tr', [
m('td', 'Pertama'),
m('td', ':'),
m('td'),
m('td', 'Nama Peserta'),
m('td.strong', ':'),
m('td.strong', Siswa.current.nama),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'Tempat & Tanggal Lahir'),
m('td.strong', ':'),
m('td.strong', Siswa.current.tempat_lahir + ' , ' + Siswa.current.tanggal_lahir),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'NIS / NISN'),
m('td.strong', ':'),
m('td.strong', Siswa.current.nis + ' / ' + Siswa.current.nisn),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'Nomor Peserta'),
m('td.strong', ':'),
m('td.strong', Siswa.current.nopes),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'Bidang Studi Keahlian'),
m('td.strong', ':'),
m('td.strong', Siswa.current.bsk),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'Program Studi Keahlian'),
m('td.strong', ':'),
m('td.strong', Siswa.current.psk),
]),
m('tr', [
m('td[colspan=3]'),
m('td', 'Kompetensi Keahlian'),
m('td.strong', ':'),
m('td.strong', Siswa.current.kk),
]),
m('tr', [
m('td[colspan=3]'),
m('td[colspan=3]', [
'Dinyatakan ',
m('span.special', 'LULUS'),
' dari satuan pendidikan SMK Bhakti Anindya Tahun Pelajaran 2018/2019',
]),
]),
m('br'),
m('tr', [
m('td', 'Kedua'),
m('td', ':'),
m('td[colspan=4]', 'Surat Keputusan ini dikeluarkan sebagai pengganti ijazah yang akan diterbitkan kemudian.'),
]),
m('tr', [
m('td', 'Ketiga'),
m('td', ':'),
m('td[colspan=4]', 'Apabila dalam Surat Keputusan ini terdapat kekeliruan akan dilakukan perbaikan sebagaimana mestinya.'),
]),
m('tr', [
m('td', 'Keempat'),
m('td', ':'),
m('td[colspan=4]', 'Surat Keputusan ini berlaku terhitung mulai tanggal ditetapkan.'),
]),
]),
m('table.signature', [
m('tr', [
m('td', 'Ditetapkan di'),
m('td', ':'),
m('td', 'Tangerang'),
]),
m('tr', [
m('td', 'Pada Tanggal'),
m('td', ':'),
m('td', '13 Mei 2019'),
]),
m('tr',
m('td', 'Kepala Sekolah,')),
m('tr',
m('td[colspan=3]',
m('.letter__sign'))),
m('tr',
m('td[colspan=3]', 'Drs. Engkos Kosasih, M.M.')),
]),
]),
]),
];
},
});

16
resources/js/models/AccessLog.js vendored Normal file
View File

@ -0,0 +1,16 @@
import m from "mithril"
var model = {
current: {},
fetch: () => {
m.request({
method: 'get',
url: '/api/access_log',
})
.then(response => {
model.current = response;
});
},
}
export default model;

20
resources/js/models/Siswa.js vendored Normal file
View File

@ -0,0 +1,20 @@
import m from "mithril"
import AccessLog from "./AccessLog"
var model = {
current: {},
cariData: data => {
m.request({
method: 'post',
url: '/api/siswa',
data
})
.then(response => {
model.current = response;
AccessLog.fetch();
console.log(model.current);
});
},
}
export default model;

73
resources/sass/main.scss vendored
View File

@ -2,6 +2,11 @@
@tailwind components;
@tailwind utilities;
@page {
size: 8.5in 14.0in;
margin: 0;
}
html, body {
@apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
font-family: 'Source Sans Pro', sans-serif;
@ -83,15 +88,23 @@ html, body {
}
.letter {
@apply mx-auto p-1;
max-width: 66ch;
.letter__header {
@apply text-center;
}
@apply mx-auto p-1 text-black w-full;
font-size: calc(.5rem + 1vmin);
p {
@apply my-2;
line-height: 1.1;
}
.letter__header {
@apply text-center mt-4;
img {
@apply w-full;
}
}
.letter__body-header {
@apply text-center;
}
ol {
@ -100,10 +113,41 @@ html, body {
table {
@apply w-full;
td {
@apply align-top pr-2;
}
.strong {
@apply font-bold;
}
.special {
@apply font-bold tracking-widest text-lg italic;
}
}
table.signature {
@apply w-auto ml-auto mt-4;
.letter__sign {
width: 79%;
height: 4rem;
background-image: url('/img/letter-sign.jpg');
background-size: contain;
}
}
}
@screen print {
html,body {
@apply bg-white;
}
body {
margin: 1cm;
}
.container > .header, .container > .form, .print-button {
@apply hidden;
}
@ -111,4 +155,19 @@ html, body {
.container {
@apply w-full max-w-full m-0 p-0;
}
.letter {
font-family: 'Calibri', 'Source Sans Pro', sans-serif;
font-size: 12px;
.letter__body-header {
font-size: 14px;
}
table.signature {
.letter__sign {
height: 3.5rem;
}
}
}
}

62
resources/views/main.blade.php
View File

@ -14,68 +14,6 @@
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">Pengumuman Kelulusan SMK Bhakti Anindya</h1>
<span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
</div>
<form class="form" onsubmit="showLetter()">
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="input-name">Nama Lengkap</label>
<input class="form-input input-text" id="input-name" type="text" autocomplete="off" required>
<p class="input-helper">Nama lengkap sesuai dengan absensi.</p>
</div>
<div class="form-group">
<label class="form-label" for="input-nisn">NISN</label>
<input class="form-input input-text"id="input-nisn" type="text" autocomplete="off" required>
<p class="input-helper">Nomor Induk Siswa Nasional</p>
</div>
<button type="submit" class="form-submit">Lihat</button>
</div>
</form>
<div class="letter hidden">
<button type="button" class="print-button" onclick="window.print()">
&#9113; Print
</button>
<div class="letter__header">
<p><strong>SMK BHAKTI ANINDYA</strong></p>
<p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p>
</div>
<hr/>
<div class="letter__body">
<p class="letter__header"><strong>PERNYATAAN KELULUSAN</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>
<table>
<tr>
<th>Nama</th>
<th>:</th>
<td>nama_lengkap</td>
</tr>
<tr>
<th>NISN</th>
<th>:</th>
<td>nis_nasional</td>
</tr>
<tr>
<th>Kelas</th>
<th>:</th>
<td>kelas</td>
</tr>
<tr>
<th>Tempat, Tanggal Lahir</th>
<th>:</th>
<td>tempat_lahir, tanggal_lahir</td>
</tr>
</table>
<p>Dinyatakan <strong>LULUS/TIDAK LULUS</strong> lorem ipsum dolor sit amet, consectur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<script src="js/app.js"></script>

12
routes/api.php
View File

@ -17,8 +17,8 @@ Route::post('/siswa', function (Request $request) {
// Validate user inputs
// Auto redirect on fail
Validator::make($request->all(), [
'nama' => 'required|string',
'nisn' => 'required|regex:/^[0-9]+$/',
'tglLahir' => 'required|regex:/^[0-9]+$/',
], [
'required' => 'Kolom :attribute harus diisi.',
'string' => 'Kolom :attribute tidak sesuai.',
@ -26,8 +26,9 @@ Route::post('/siswa', function (Request $request) {
])->validate();
// Look for the given inputs in the resource
$siswa = App\Siswa::where('nama', $request->nama)
->where('nisn', $request->nisn)
$tglLahir = Carbon\Carbon::parse($request->tglLahir);
$siswa = App\Siswa::where('nisn', $request->nisn)
->where('tanggal_lahir', $tglLahir)
->first();
// Redirect with error if not found
@ -43,7 +44,10 @@ Route::post('/siswa', function (Request $request) {
Route::get('/access_log', function () {
// Get the number of unique access
$logs = App\AccessLog::all()->unique()->count();
$logs = DB::table('access_logs')->select(DB::raw('count(*) as num'))
->groupBy('siswa_id')
->get()
->count();
// Get the total number of available resource
$resources = App\Siswa::count();

1
webpack.mix.js vendored
View File

@ -14,6 +14,7 @@ const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/main.scss', 'public/css')
.copyDirectory('resources/img', 'public/img')
.options({
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],