FR-MUK.

04 : TUGAS PRAKTEK-DEMONSTRASI/PRAKTEK

Skema : PROGRAMMER

Nama Asesor : Jumail

Nama Asesi : Reddy Oktariawan

Tanggal uji kompetensi : 30 Desember 2022

Waktu : 3 Jam

A. Petunjuk

1. Baca dan pelajari setiap langkah/instruksi dibawah ini semuanya dengan cermat sebelum
melaksanakan praktek
2. Laksanakan pekerjaan sesuai dengan urutan proses yang sudah ditetapkan
3. Seluruh proses kerja mengacu kepada sop/wi/ik yang dipersyaratkan
4. Waktu pengerjaan yang disediakan 3 jam
B. Skenario Ujian Praktek
1. Buatlah satu buat program, dengan tema dan kegunaan bebas, atau ditentukan sendiri
2. Secara umum proses pengerjaan dimulai dari perancangan atau pemodelan, kemudian
pembuatan source code, kompile atau build, debugging, dokumentasi, dan melakukan unit test.
3. Program yang dibuat secara umum memenuhi ketentuan-ketentuan sebagai berikut :
a. Program yang dibuat harus sesuai dengan rancangan yang dibuat
b. Menerapkan coding guidlines sesuai dengan bahasa pemrograman yang digunakan
c. Program yang dibuat mempunyai interface input dan ouput(tampilan) ke pengguna
d. Program yang dibuat harus menerapkan tipe data yang sesuai, mengikuti sytax Bahasa
pemrograman yang digunakan, dan mempunyai sturutur control percabangan
(if..then..else) dan pengulangan (do while....for...dll)
e. Program yang dibuat harus menerapkan penggunaan prosedur, fungsi, atau method
f. Program yang dibuat harus menggunaan Array
g. Program yang dibuat harus mempunyai fasilitas untuk menyimpan dan membaca data
di media penyimpan
h. Program harus menerapkan hak akses tipe data dengan benar, mempunyai properties,
menerapkan inheritance, polymorpy, overloading, dan interface.
i. Program yang dibuat harus terdiri dari 2 atau lebih namespace atau package
j. Program yang dibuat harus menggunakan atau menanfaatkan eksternal library yang
sudah ada dan tersedia
k. Program harus menggunakan basis data
l. Program harus didokumentasikan dengan baik dengan standard atau guidelines
dokumentasi sesuai dengan bahasa pemrograman yang digunakan
 Jawaban

1. Nama program “SIMLAB - Fitur Tambah Modul Praktikum”

2. Perancangan
a. Activity Diagram Rancangan Fitur Tambah Modul Praktikum
b. Mockup design fitur Tambah Modul Praktikum

c. Pengkodean
Disini saya menggunakan php dengan framework laravel. Langkah-langkahnya
diantaranya ;
1. Membuat index (menampilkan data pada menu Modul)
a. Membuat route ke index
Route::get('/modul', [ModulController::class, 'index']);
Route a adalah route ketika ada pemanggilan dari url “/modul” dimana route
ini akan mengaktifkan atau menggunakan ModulController yang memiliki
fungsi “index”
b. Membuat controller function index
#ModulController
public function index()
{
$dataModul = Modul::all();
return view ('modul.index', compact('dataModul'));
}
ModulController fungsi index melakukan pemanggilan method view
“modul.index” dimana didalamnya terdapat variable dataModul yang berisi
data dari Model Modul
c. Model Modul
class Modul extends Model
{
use HasFactory;
protected $table = 'modul';
protected $fillable = ['id_modul',
'nama_modul','kelas_id','tanggal_praktek'];
protected $primaryKey = 'id_modul';
public function kelas()
{
return $this->belongsTo(Praktikum::class, 'kelas_id',
'id_praktikum');
}
 public function membermodul()
{
return $this->belongsTo(Membermodul::class, 'id_modul',
'modul_id');
}
public function alat()
{
return $this->belongsToMany(Alats::class,
'membermodul','modul_id', 'alat_id');
}
}

Pada Model Modul terlihat bahwa model ini memiliki table yang bernama
modul dimana pada table modul tersebut memiliki beberapa field yaitu
'id_modul','nama_modul','kelas_id','tanggal_praktek'
Data-data inilah yang kemudian dipanggil pada
ModulController fungsi index untuk kemudian ditampilkan pada
view “modul.index”

d. View.index
@extends('dashboard.layouts.main')

@section('container')

<!-- Custom styles for this datatables -->

<link
href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.mi
n.css" rel="stylesheet">

@if (session()-> has('success'))

<div class="alert alert-success alert-dismissible fade show"
role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div>
<h3 class="title my-3">List Modul</h3>
<a class="btn btn-success my-3 ms-auto"
href="/modul/createmodul" role="button">Tambah Modul</a>
</div>

<table id="example" class="display" style="width:100%">

<thead>
<tr>
<th>#</th>
<th>Nama Modul</th>
 <th>Jadwal Praktek</th>
<th>Nama Kelas</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($dataModul as $key=>$dt )

<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $dt->nama_modul }}</td>
<td>{{ $dt->tanggal_praktek }}</td>
<td>{{ $dt->kelas->nama_kelas }}</td>
<td>
<a href="#" class="badge bg-success" data-bs-
toggle="modal" data-bs-target="#Modaldetail-{{ $dt->id_modul
}}"><span data-feather="eye"></span></a>
<a href="#" class="badge bg-info"><span data-
feather="edit"></span></a>
<a href="#" class="badge bg-danger"><span data-
feather="x-circle"></span></a>
</td>
</tr>
@endforeach
</tbody>
</table>

<!-- Modal -->

@foreach ($dataModul as $dt )

<div class="modal fade" id="Modaldetail-{{ $dt->id_modul }}"

tabindex="-1" aria-labelledby="exampleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Alat
dan Bahan {{ $dt->nama_modul }}</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama Alat</th>
</tr>
</thead>
 <tbody>
@foreach ($dt->alat as $x)
<tr>
<th scope="row">{{$loop->iteration}}</th>
<td>{{ $x->nama_alat}}</td>
</tr>
@endforeach
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama Bahan</th>
</tr>
</thead>
<tbody>
@foreach ($dt->bahan as $y)
<tr>
<th scope="row">{{$loop->iteration}}</th>
<td>{{ $y->nama_bahan}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endforeach

@endsection
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script
src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.
js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable();
});</script>

2. Membuat Fungsi Tambah Modul

a. Membuat route createmodul
Route::get('/modul/createmodul', [ModulController::class,
'create']);
b. ModulController fungsi “create”
public function create()
{
/ $alat = DB::table('alat')->get();
$bahan = DB::table('bahan')->get();
$kelas = Praktikum::all();
return view ('modul.createmodul',
compact('alat','kelas', 'bahan'));

c. Membuat View “modul.createmodul”

@extends('dashboard.layouts.main')

<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>

@section('container')
<h3 class="h5 my-3 fw-normal text-center">Tambah Modul
Praktikum</h3>
<form action="/modul/createmodul" method="POST" class="col-
md d-block align-item-center mx-auto">
@csrf
<div class="form-group mb-1">
<label for="nama_modul">Nama Modul</label>
<input type="text" name="nama_modul" class="form-
control @error('nama_modul') is-invalid @enderror"
id="nama_modul" placeholder="Nama modul" required
value="{{ old ('nama_modul') }}" >
@error('nama_modul')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>

<div class="form-group mb-1">

<label for="nama_modul">Pilih Kelas</label>
 <select class="form-control" name="kelas_id"
id="kelas_id" required >
<option selected disabled>Pilih Kelas</option>
@foreach ( $kelas as $dt )
<option value="{{ $dt->id_praktikum }}">{{ $dt-
>nama_kelas }}</option>
@endforeach
</select>
@error('kelas_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>

<div class="form-group mb-1">

<label for="nama_modul">Tanggal Praktek</label>
<div class="input-group date"
id="tanggal_praktek" name="tanggal_praktek" required>
<input type="text" class="form-control"
name="tanggal_praktek" value="{{ old ('tanggal_praktek') }}">
<span class="input-group-append ">
<span class="input-group-text bg-
white ">
<i class="fa fa-calendar mx-
auto"></i>
</span>
</span>
</div>
</div>

<div class="form-group mb-1">

<label for="nama_modul">Tambah Alat</label>
<div class="input-group">
<select class="selectpicker form-control w-100"
name="alat[]" id="alat" multiple data-live-search="true">
@foreach ($alat as $a )
<option value="{{ $a->id_alat }}">{{ $a-
>nama_alat }}{{' '.$a->merk }}{{' '.$a->ukuran }}</option>
@endforeach
</select>
</div>
</div>
<div class="listbahan">
<div class="clonebahan row align-items-start">
<div class="col-8 form-group mb-1">
<label for="nama_modul">Pilih Bahan</label>
<div class="bahan_wrapper">
<div class="clone_bahan">
 <div class="input-group">
<select class="form-control w-
100" name="id_bahan[]" id="bahan">
@foreach ($bahan as $b )
<option value="{{ $b-
>id_bahan }}">{{ $b->nama_bahan }}{{' '.$b->rumus }}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<div class="col-3 form-group mb-1">
<label for="nama_modul">Jumlah Bahan</label>
<input type="number" name="jumlah_bahan[]"
class="form-control" placeholder="Masukkan Jumlah Bahan">
</div>

<div class="col form-group mb-1">

<label for="nama_modul">Tambah</label>
<button class="w-100 btn btn-md btn-warning "
id="add_button" type="button">+</button>
</div>
</div>
</div>

<button class="btn btn-md btn-primary d-flex justify-

content-end" type="submit">Buat Modul</button>
</div>

</form>
</div>
<!-- end of from area -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
@endsection

@push('styles')
<link href="{{ asset('select/css/bootstrap-
select.min.css')}}" rel="stylesheet">
@endpush

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/boots
trap.bundle.min.js"></script>
<!--<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.m
in.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.14.0-beta2/js/bootstrap-select.min.js"></script>-->

<script type="text/javascript">
$(function() {
$('#tanggal_praktek',).datepicker(
{format:'yyyy-mm-dd'}
);

// add bahan when

$('#add_button').on('click', function() {
let bahanPicker = $('.clonebahan').first().clone()
console.log(bahanPicker)
let wrapper = $('.listbahan')
console.log('wrapper' ,wrapper)
$('.listbahan').append(bahanPicker)
})
});
</script>

d. Membuat Route storemodul

Route::post('/modul/createmodul', [ModulController::class,
'storemodul']);

e. Membuat ModulController fungsi storemodul

public function storemodul(Request $request)

{
$data = $request->all();
//dd($data);

$modul = new Modul;

$modul->nama_modul=$data['nama_modul'];
$modul->kelas_id=$data['kelas_id'];
$modul->tanggal_praktek=$data['tanggal_praktek'];
$modul->save();

foreach ($data['alat'] as $index=>$alat){

$x = ['modul_id'=>$modul->id_modul,
'alat_id'=>$data['alat'][$index],
'bahan_id'=>0,
 'jumlah_bahan'=>0,
];
Membermodul::create($x);
}

foreach ($data['id_bahan'] as $index=>$bahan){

$x = ['modul_id'=>$modul->id_modul,
'bahan_id'=>$bahan,
'alat_id'=>0,
'jumlah_bahan'=>$data['jumlah_bahan'][$index],
];
Membermodul::create($x);
}

return redirect ('/modul')->with('success', 'Data Modul

berhasil ditambahkan');
}