Aplikasi GIS Geographic Information system berbasis web (codeigniter) – bagian V

31 Dec, 2020 | Ditulis oleh : Fadlur Rohman

Rekomendasi Kelas
Membangun Toko Online Menggunakan Laravel

Laravel adalah salah framework php dengan pengguna terbanyak. Dengan banyaknya pengguna otomatis ketika kita menghadapi error akan lebih mudah menemukan solusin...

Halo, sekarang kita sampai pada bagian untuk mengadministrasi (CRUD) data jalan. Untuk mempersingkat waktu pengembangan kita gunakan ajax jquery saja. Jadi kita cukup membuat satu buah file controller dan satu buah file views. Agar pengelolaan file lebih mudah, kita buat folder sendiri di dalam folder controller, yaitu folder admin.

Sebelum kita membuat file controller dan views, kita harus mensetting koneksi database pada file database.php di dalam folder config.

# database.php

 

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',//usermu
	'password' => 'root',//passwordmu
	'database' => 'gis_codeigniter',//nama database
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Kemudian kita setting database untuk diload pada saat awal aplikasi diakses, setting bisa kita lakukan pada file autoload.php di dalam folder config.

# autoload.php

$autoload['libraries'] = array('database');

File koneksi dan autoload sudah selesai disetting, selanjutnya buat file controller yaitu Jalan.php.

# Jalan.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Jalan extends CI_Controller{

    public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jalan
        $this->load->model(array('model_jalan'));
        $this->load->helper('url');
        $this->load->library('form_validation');
    }

    function index()
    {
        $data = array('content' => 'admin/formjalan',//kita buat file formjalan di dalam folder views/admin
        'itemjalan'=>$this->model_jalan->getAll());
        $this->load->view('templates/template-admin', $data);
    }
}

Buat juga folder admin di folder views dan tambahkan file formjalan.php di dalam folder admin tadi.

# formjalan.php

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list-alt"></span> Form Jalan</h3>
              </div>
              <div class="panel-body">
                  <form action="#">
                      <div class="form-group">
                        <label for="namajalan">Nama Jalan</label>
                        <input type="text" class="form-control" id="namajalan" placeholder="">
                        <input type="hidden" name="id_jalan" id="id_jalan" value="">
                      </div>
                      <div class="form-group">
                        <label for="keterangan">Keterangan</label>
                        <textarea name="keterangan" class="form-control" id="keterangan"></textarea>
                      </div>
                      <div class="form-group">
                        <button type="button" name="simpanjalan" id="simpanjalan" class="btn btn-primary">Simpan</button>
                        <button type="button" name="resetjalan"  id="resetjalan" class="btn btn-warning">Reset</button>
                        <button type="button" name="updatejalan" id="updatejalan" class="btn btn-info" disabled="true">Update</button>
                      </div>
                  </form>
              </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Daftar Jalan</h3>
              </div>
              <div class="panel-body">
                  <table class="table table-bordered">
                      <th>No</th>
                      <th>Nama Jalan</th>
                      <th>Keterangan</th>
                      <th></th>
                      <tbody id="daftarjalan">
                          <?php
                          $no = 1;
                          foreach ($itemjalan->result() as $jalan) {
                              ?>
                              <tr>
                                  <td><?php echo $no;?></td>
                                  <td><?php echo $jalan->namajalan;?></td>
                                  <td><?php echo $jalan->keterangan;?></td>
                                  <td>
                                      <button type="button" class="btn btn-sm btn-info" data-idjalan="<?php echo $jalan->id_jalan;?>" name="editjalan<?php echo $jalan->id_jalan;?>" id="editjalan"><span class="glyphicon glyphicon-edit"></span></button>
                                      <button type="button" class="btn btn-sm btn-danger" data-idjalan="<?php echo $jalan->id_jalan;?>" name="deletejalan<?php echo $jalan->id_jalan;?>" id="deletejalan"><span class="glyphicon glyphicon-trash"></span></button>
                                  </td>
                              </tr>
                              <?php
                              $no++;
                          }
                           ?>
                      </tbody>
                  </table>
              </div>
            </div>
        </div>
    </div>
</div>

Kemudian akses dengan alamat : localhost/simplegis/index.php/admin/jalan

Sehingga tampak halaman seperti berikut :

Untuk memproses CRUD kita buat function untuk create, read, update, dan delete.

Pada bagian paling bawah file formjalan.php tambahkan script seperti berikut :

# function simpan dan reset

<script>
    $(document).on('click','#simpanjalan',simpanjalan)
    .on('click','#resetjalan',resetjalan)
    .on('click','#updatejalan',updatejalan)
    .on('click','#editjalan',editjalan)
    .on('click','#deletejalan',deletejalan);
    function simpanjalan() {//simpan jalan
        var datajalan = {'namajalan':$('#namajalan').val(),
        'keterangan':$('#keterangan').val()};console.log(datajalan);
        $.ajax({
            url : '<?php echo site_url("admin/jalan/create");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                    resetjalan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function resetjalan() {//reset form jalan
        $('#namajalan').val('');
        $('#keterangan').val('');
        $('#id_jalan').val('');
        $('#simpanjalan').attr('disabled',false);
        $('#updatejalan').attr('disabled',true);
    }
</script>

Buka kembali file Jalan.php dan tambahkan function create();

# function create()

function create(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajalan', 'Nama Jalan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_jalan->create()) {
                    $status = 'success';
                    $msg = "Data jalan berhasil disimpan";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menyimpan data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

# function editjalan()

function editjalan() {//edit jalan
        var id = $(this).data('idjalan');
        var datajalan = {'id_jalan':id};console.log(datajalan);
        $('input[name=editjalan'+id+']').attr('disabled',true);//biar ga di klik dua kali, maka di disabled
        $.ajax({
            url : '<?php echo site_url("admin/jalan/edit");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                    $('#simpanjalan').attr('disabled',true);
                    $('#updatejalan').attr('disabled',false);
                    $.each(data.msg,function(k,v){
                        $('#id_jalan').val(v['id_jalan']);
                        $('#namajalan').val(v['namajalan']);
                        $('#keterangan').val(v['keterangan']);
                    })
                }else{
                    alert(data.msg);
                    $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
                $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
            }
        })
    }

Tambahkan juga function edit() pada file controller Jalan.php

# function edit()

function edit(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->read($id)->num_rows()!=null) {
                    $status = 'success';
                    $msg = $this->model_jalan->read($id)->result();
                }else{
                    $status = 'error';
                    $msg = "Data jalan tidak ditemukan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

# function updatejalan()

function updatejalan() {//update jalan
        var datajalan = {'namajalan':$('#namajalan').val(),
        'keterangan':$('#keterangan').val(),
        'id_jalan':$('#id_jalan').val()};console.log(datajalan);
        $.ajax({
            url : '<?php echo site_url("admin/jalan/update");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                    resetjalan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }

Tambahkan juga function update() pada file controller Jalan.php

# function update()

function update(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajalan', 'Nama Jalan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->update($id)) {
                    $status = 'success';
                    $msg = "Data jalan berhasil diupdate";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat mengupdate data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

terakhir tambahkan function deletejalan pada formjalan.php

# function deletejalan()

function deletejalan() {//delete jalan
        if (confirm("Anda yakin akan menghapus data jalan ini?")) {
            var id = $(this).data('idjalan');
            var datajalan = {'id_jalan':id};console.log(datajalan);
            $.ajax({
                url : '<?php echo site_url("admin/jalan/delete");?>',
                data : datajalan,
                dataType : 'json',
                type : 'POST',
                success : function(data,status){
                    if (data.status!='error') {
                        $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                        resetjalan();//form langsung dikosongkan pas selesai input data
                    }else{
                        alert(data.msg);
                    }
                },
                error : function(x,t,m){
                    alert(x.responseText);
                }
            })
        }
    }

Begitu juga file Jalan.php tambahkan function delete()

# function delete()

function delete(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->delete($id)) {
                    $status = 'success';
                    $msg = "Data jalan berhasil dihapus";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menghapus data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

Setelah selesai menambahkan function tersebut maka file formjalan.php akan menjadi seperti berikut :

# fomjalan.php

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list-alt"></span> Form Jalan</h3>
              </div>
              <div class="panel-body">
                  <form action="#">
                      <div class="form-group">
                        <label for="namajalan">Nama Jalan</label>
                        <input type="text" class="form-control" id="namajalan" placeholder="">
                        <input type="hidden" name="id_jalan" id="id_jalan" value="">
                      </div>
                      <div class="form-group">
                        <label for="keterangan">Keterangan</label>
                        <textarea name="keterangan" class="form-control" id="keterangan"></textarea>
                      </div>
                      <div class="form-group">
                        <button type="button" name="simpanjalan" id="simpanjalan" class="btn btn-primary">Simpan</button>
                        <button type="button" name="resetjalan"  id="resetjalan" class="btn btn-warning">Reset</button>
                        <button type="button" name="updatejalan" id="updatejalan" class="btn btn-info" disabled="true">Update</button>
                      </div>
                  </form>
              </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Daftar Jalan</h3>
              </div>
              <div class="panel-body">
                  <table class="table table-bordered">
                      <th>No</th>
                      <th>Nama Jalan</th>
                      <th>Keterangan</th>
                      <th></th>
                      <tbody id="daftarjalan">
                          <?php
                          $no = 1;
                          foreach ($itemjalan->result() as $jalan) {
                              ?>
                              <tr>
                                  <td><?php echo $no;?></td>
                                  <td><?php echo $jalan->namajalan;?></td>
                                  <td><?php echo $jalan->keterangan;?></td>
                                  <td>
                                      <button type="button" class="btn btn-sm btn-info" data-idjalan="<?php echo $jalan->id_jalan;?>" name="editjalan<?php echo $jalan->id_jalan;?>" id="editjalan"><span class="glyphicon glyphicon-edit"></span></button>
                                      <button type="button" class="btn btn-sm btn-danger" data-idjalan="<?php echo $jalan->id_jalan;?>" name="deletejalan<?php echo $jalan->id_jalan;?>" id="deletejalan"><span class="glyphicon glyphicon-trash"></span></button>
                                  </td>
                              </tr>
                              <?php
                              $no++;
                          }
                           ?>
                      </tbody>
                  </table>
              </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).on('click','#simpanjalan',simpanjalan)
    .on('click','#resetjalan',resetjalan)
    .on('click','#updatejalan',updatejalan)
    .on('click','#editjalan',editjalan)
    .on('click','#deletejalan',deletejalan);
    function simpanjalan() {//simpan jalan
        var datajalan = {'namajalan':$('#namajalan').val(),
        'keterangan':$('#keterangan').val()};console.log(datajalan);
        $.ajax({
            url : '<?php echo site_url("admin/jalan/create");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                    resetjalan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function resetjalan() {//reset form jalan
        $('#namajalan').val('');
        $('#keterangan').val('');
        $('#id_jalan').val('');
        $('#simpanjalan').attr('disabled',false);
        $('#updatejalan').attr('disabled',true);
    }
    function updatejalan() {//update jalan
        var datajalan = {'namajalan':$('#namajalan').val(),
        'keterangan':$('#keterangan').val(),
        'id_jalan':$('#id_jalan').val()};console.log(datajalan);
        $.ajax({
            url : '<?php echo site_url("admin/jalan/update");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                    resetjalan();//form langsung dikosongkan pas selesai input data
                }else{
                    alert(data.msg);
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
            }
        })
    }
    function editjalan() {//edit jalan
        var id = $(this).data('idjalan');
        var datajalan = {'id_jalan':id};console.log(datajalan);
        $('input[name=editjalan'+id+']').attr('disabled',true);//biar ga di klik dua kali, maka di disabled
        $.ajax({
            url : '<?php echo site_url("admin/jalan/edit");?>',
            data : datajalan,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                    $('#simpanjalan').attr('disabled',true);
                    $('#updatejalan').attr('disabled',false);
                    $.each(data.msg,function(k,v){
                        $('#id_jalan').val(v['id_jalan']);
                        $('#namajalan').val(v['namajalan']);
                        $('#keterangan').val(v['keterangan']);
                    })
                }else{
                    alert(data.msg);
                    $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
                }
            },
            error : function(x,t,m){
                alert(x.responseText);
                $('input[name=editjalan'+id+']').attr('disabled',false);//disabled di set false, karena transaksi berhasil
            }
        })
    }
    function deletejalan() {//delete jalan
        if (confirm("Anda yakin akan menghapus data jalan ini?")) {
            var id = $(this).data('idjalan');
            var datajalan = {'id_jalan':id};console.log(datajalan);
            $.ajax({
                url : '<?php echo site_url("admin/jalan/delete");?>',
                data : datajalan,
                dataType : 'json',
                type : 'POST',
                success : function(data,status){
                    if (data.status!='error') {
                        $('#daftarjalan').load('<?php echo current_url()." #daftarjalan > *";?>');
                        resetjalan();//form langsung dikosongkan pas selesai input data
                    }else{
                        alert(data.msg);
                    }
                },
                error : function(x,t,m){
                    alert(x.responseText);
                }
            })
        }
    }
</script>

Dan file Jalan.php akan menjadi seperti berikut :

# Jalan.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Jalan extends CI_Controller{

    public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jalan
        $this->load->model(array('model_jalan'));
        $this->load->helper('url');
        $this->load->library('form_validation');
    }

    function index()
    {
        $data = array('content' => 'admin/formjalan',//kita buat file formjalan di dalam folder views/admin
        'itemjalan'=>$this->model_jalan->getAll());
        $this->load->view('templates/template-admin', $data);
    }
    function create(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajalan', 'Nama Jalan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_jalan->create()) {
                    $status = 'success';
                    $msg = "Data jalan berhasil disimpan";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menyimpan data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function edit(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->read($id)->num_rows()!=null) {
                    $status = 'success';
                    $msg = $this->model_jalan->read($id)->result();
                }else{
                    $status = 'error';
                    $msg = "Data jalan tidak ditemukan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function update(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('namajalan', 'Nama Jalan', 'trim|required');
            $this->form_validation->set_rules('keterangan', 'Keterangan', 'trim|required');
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->update($id)) {
                    $status = 'success';
                    $msg = "Data jalan berhasil diupdate";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat mengupdate data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function delete(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            //kita validasi inputnya dulu
            $this->form_validation->set_rules('id_jalan', 'ID Jalan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                $id = $this->input->post('id_jalan');
                if ($this->model_jalan->delete($id)) {
                    $status = 'success';
                    $msg = "Data jalan berhasil dihapus";
                }else{
                    $status = 'error';
                    $msg = "terjadi kesalahan saat menghapus data jalan";
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }

}

Proses CRUD Jalan telah selesai, selanjutnya kita akan membuat function CRUD data jembatan.

Terima kasih.




Related Post :

Restful API Menggunakan Laravel Framework

31 Dec, 2020 - Fadlur Rohman

Laravel telah dilengkapi fitur untuk membuat backend API, diantaranya:...

Sistem registrasi menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untu...

Membuat sistem login menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses hala...

Membuat Grafik Menggunakan CanvasJs

31 Dec, 2020 - Fadlur Rohman

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, bia...

Rest Web Service Codeigniter Bagian Keempat (API KEY)

31 Dec, 2020 - Fadlur Rohman

Setelah kita membuat&nbsp;database&nbsp;untuk menyimpan data hasil mon...

Rest Web Service Codeigniter Bagian Ketiga (Database)

31 Dec, 2020 - Fadlur Rohman

Bagian Pertama Bagian Kedua Pada bagian ini kita akan mensetting konek...

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya