Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku).

ok langsung saja kita buat project laravel dengan nama perpus :

composer create-project --prefer-dist laravel/laravel perpus

setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code.

Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut :

note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing.

Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut : 

php artisan make:migration create_table_anggota

php artisan make:migration create_table_buku

php artisan make:migration create_table_kategori

php artisan make:migration create_table_transaksi

lalu kita edit masing-masing migration seperti berikut :

migration table_anggota

public function up()

{

Schema::create('table_anggota', function (Blueprint $table) {

$table->bigIncrements('id_anggota');

$table->string('nama_anggota',50);

$table->string('jenis_kelamin',50);

$table->string('alamat');

$table->string('email',50);

$table->string('no_telp',20);

$table->timestamps();

});

}

migration table_buku

public function up()

{

Schema::create('table_buku', function (Blueprint $table) {

$table->bigIncrements('id_buku');

$table->string('judul_buku', 40);

$table->string('deskripsi', 100);

$table->integer('kategori');

$table->string('cover_img', 50);

$table->timestamps();

});

}

migration table_kategori

public function up()

{

Schema::create('table_kategori', function (Blueprint $table) {

$table->bigIncrements('kategori');

$table->string('deskripsi');

$table->timestamps();

});

}

migration table_transaksi

public function up()

{

Schema::create('table_transaksi', function (Blueprint $table) {

$table->bigIncrements('id');

$table->integer('id_anggota');

$table->integer('id_buku');

$table->date('tgl_pinjam');

$table->date('tgl_kembali');

$table->timestamps();

});

}

Setelah semua migration dibuat seperti diatas, selanjutnya kita lakukan migration tapi sebelum melakukan migration kita buka file AppServiceProvider.php yang ada di folder app/Providers dan kita rubah isinya menjadi seperti berikut :

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

/**

     * Register any application services.

     *

     * @return void

     */

public function register()

{

//

}

/**

     * Bootstrap any application services.

     *

     * @return void

     */

public function boot()

{

Schema::defaultStringLength(191);

}

}

tujuan kita merubah file AppServiceProvider.php ini adalah agar tidak terjadi error ketikan kita menjalankan perintah migrate, jalankan command berikut melalui terminal untuk melakukan migrate:

php artisan migrate

jika sudah, kita buka phpmyadmin lagi dan kita buka database yang sudah kita buat tadi, yaitu db_perpus maka akan terlihat table-table yang sudah kita buat di migration tadi seperti berikut :

Selanjutnya kita buka project laravel lagi, kita tambahkan 4 buah model yaitu : Anggota, Buku, Kategori, dan Transaksi. untuk membuat model kita jalankan command berikut  :

php artisan make:model Anggota

php artisan make:model Buku

php artisan make:model Kategori

php artisan make:model Transaksi

lalu kita edit masing-masing model menjadi seperti berikut :

Model Aggota

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Anggota extends Model

{

protected $table = 'table_anggota';

protected $fillable = ['nama_anggota','jenis_kelamin','alamat',
                           'email','no_telp'];

}

Model Buku

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Buku extends Model

{

protected $table = 'table_buku';

protected $fillable = ['judul_buku','deksripsi','kategori','cover_img'];

}

Model Kategori

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Kategori extends Model

{

protected $table = 'table_kategori';

protected $fillable = ['deskripsi'];

}

Model Transaksi

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Transaksi extends Model

{

protected $table = 'table_transaksi';

protected $fillable = ['id_anggota', 'id_buku', 'tgl_pinjam'];

}

Selanjutnya kita akan membuat view, pertama kita tambahkan 5 folder baru didalam folder resources/views yaitu folder anggota, buku, kategori, transaksi dan layout

kita buat file main.blade.php didalam folder layout

<!doctype html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, 

                shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" 

  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script 

 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

</script>

<script 

 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

<title>@yield('title')</title>

</head>

<body>

<div class="container">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="/">HOME</a>

<button class="navbar-toggler" type="button" 

                data-toggle="collapse" data-target="#navbarNavAltMarkup" 

                aria-controls="navbarNavAltMarkup" aria-expanded="false" 

                aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<div class="navbar-nav">

<a class="nav-item nav-link" href="/anggota">Anggota</a>

<a class="nav-item nav-link" href="/kategori">Kategori Buku</a>

<a class="nav-item nav-link" href="/buku">Daftar Buku</a>

<a class="nav-item nav-link" href="/transaksi">Transaksi</a>

</div>

</div>

</nav>

</div>

@yield('content')

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

</body>

</html>

dan didalam folder views kita buat file inde.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-4">Selamat Datang!</h1>

<p class="lead">Ini adalah contoh sistem informasi 

perpustakaan sederhana dengan laravel 5.8</p>

<hr class="my-4">            

</div>

</div>

@endsection

didalam folder anggota kita buat dua view yaitu index.blade.php dan create.blade.php

index.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

@if(session('msg'))

<div class="alert alert-success alert-dismissible fade show mt-2" 

                role="alert">

{{session('msg')}}

<button type="button" class="close" data-dismiss="alert" 

                aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

@endif

<h1 class="display-6">Data Anggota</h1>

<hr class="my-4">     

<a href="anggota/create" class="btn btn-primary mb-1">

Tambah Anggota</a>       

<table class="table">

<thead class="thead-dark">

<tr>

<th scope="col">#</th>

<th scope="col">Nama</th>

<th scope="col">Alamat</th>

<th scope="col">Jenis Kelamin</th>

<th scope="col">Email</th>

<th scope="col">No. HP</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach ($anggota as $ang)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $ang->nama_anggota }}</td>

<td>{{ $ang->alamat }}</td>

<td>{{ $ang->jenis_kelamin }}</td>

<td>{{ $ang->email }}</td>

<td>{{ $ang->no_telp }}</td>

<td>

<a href="" class="badge badge-primary">Edit</a>

<a href="" class="badge badge-danger">Hapus</a>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

@endsection

create.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-6">Tambah Data Anggota</h1>

<hr class="my-4">     

<form action="/anggota" method="POST">

@csrf

<div class="form-group">

<label for="nama">Nama Anggota</label>

<input type="text" class="form-control" id="nama" 

                    name="nama_anggota" placeholder="Nama Anggota" 

                    value="{{ old('nama_anggota') }}">

</div>

<div class="form-group">

<label for="alamat">Alamat</label>

<input type="text" class="form-control" id="alamat" 

                    name="alamat" placeholder="Alamat Anggota" 

                    value="{{ old('alamat') }}">

</div>

<div class="form-group">

<label for="jenis_kelamin">Jenis Kelamin</label>

<select class="form-control" id="jenis_kelamin" 

                    name="jenis_kelamin">

<option value="laki-laki">Laki-laki</option>

<option value="perempuan">Perempuan</option>

</select>

</div>

<div class="form-group">

<label for="email">Alamat Email</label>

<input type="email" class="form-control" id="email" 

                    name="email" aria-describedby="emailHelp" 

                    placeholder="Enter email" value="{{ old('email') }}">

</div>

<div class="form-group">

<label for="no_telp">No. HP</label>

<input type="text" class="form-control" id="no_telp" 

                    name="no_telp" placeholder="NO. HP" 

                    value="{{ old('no_telp') }}">

</div>

<button type="submit" class="btn btn-primary">Simpan</button>

</form>

</div>

</div>

@endsection

di folder buku kita buat juga dua view index.blade.php dan create.blade.php

buku-> create.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-6">Tambah Data Buku</h1>

<hr class="my-4">     

<form action="/buku" method="POST" enctype="multipart/form-data">

@csrf

<div class="form-group">

<label for="judul_buku">Judul Buku</label>

<input type="text" class="form-control" name="judul_buku" 

                    placeholder="Judul Buku" value="{{ old('judul_buku') }}">

</div>

<div class="form-group">

<label for="deskripsi">Deskripsi Buku</label>

<input type="text" class="form-control" name="deskripsi" 

                    placeholder="Deskripsi Buku" value="{{ old('deskripsi') }}">

</div>

<div class="form-group">

<label for="kategori">Kategori Buku</label>

<select class="form-control" id="kategori" name="kategori">

@foreach ($kategori as $kat)

<option value="{{ $kat->kategori }}">

{{ $kat->deskripsi }}</option>

@endforeach

</select>

</div>

<div class="form-group">

<label for="cover_img">Cover Buku</label>

<input type="file" name="cover_img">

</div>

<button type="submit" class="btn btn-primary">Simpan</button>

</form>

</div>

</div>

@endsection

buku-> index.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

@if(session('msg'))

<div class="alert alert-success alert-dismissible fade show mt-2" 

            role="alert">

{{session('msg')}}

<button type="button" class="close" data-dismiss="alert" 

                aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

@endif

<h1 class="display-6">Data Buku</h1>

<hr class="my-4">     

<a href="buku/create" class="btn btn-primary mb-1">Tambah Buku</a>       

<table class="table">

<thead class="thead-dark">

<tr>

<th scope="col">#</th>

<th scope="col">Judul Buku</th>

<th scope="col">Deskripsi Buku</th>

<th scope="col">Kategori Buku</th>

<th scope="col">Cover Buku</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach ($buku as $buku)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $buku->judul_buku }}</td>

<td>{{ $buku->deskripsi }}</td>

<td>{{ $buku->kategori }}</td>

<td><img src='image/{{ $buku->cover_img }}' 

                         style='width:80px; height:50px;'></td>

<td>

<a href="buku/edit/{{ $buku->id_buku }}" 

                            class="badge badge-primary">Edit</a>

<a href="buku/destroy/{{ $buku->id_buku }}" 

                            class="badge badge-danger">Hapus</a>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

@endsection

di folder kategori juga kita buat view index.blade.php dan create.blade.php

kategori->index.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

@if(session('msg'))

<div class="alert alert-success alert-dismissible fade show mt-2" 

            role="alert">

{{session('msg')}}

<button type="button" class="close" data-dismiss="alert" 

                 aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

@endif

<h1 class="display-6">Kategori Buku</h1>

<hr class="my-4">     

<a href="kategori/create" class="btn btn-primary mb-1">

Tambah Kategori Buku</a>       

<table class="table">

<thead class="thead-dark">

<tr>

<th scope="col">#</th>

<th scope="col">Kategori</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach ($kategori as $kat)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $kat->deskripsi }}</td>

<td>

<a href="" class="badge badge-primary">Edit</a>

<a href="" class="badge badge-danger">Hapus</a>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

@endsection

kategori->create.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-6">Tambah Kategori Buku</h1>

<hr class="my-4">     

<form action="/kategori" method="POST">

@csrf

<div class="form-group">

<label for="deskripsi">Deskripsi</label>

<input type="text" class="form-control" id="deskripsi" 

                    name="deskripsi" placeholder="Deskripsi" 

                    value="{{ old('deskripsi') }}">

</div>

<button type="submit" class="btn btn-primary">Simpan</button>

</form>

</div>

</div>

@endsection

dan di folder transaksi kita buat 3 view yaitu : index.blade.php, pinjam.blade.php dan kembali.blade.php

transaksi->index.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

@if(session('msg'))

<div class="alert alert-success alert-dismissible fade show mt-2" 

            role="alert">

{{session('msg')}}

<button type="button" class="close" data-dismiss="alert" 

                aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

@endif

<h1 class="display-6">Data Peminjaman Buku</h1>

<hr class="my-4">     

<a href="transaksi/create" class="btn btn-primary mb-1">

Peminjaman Buku</a>

<!-- <a href="buku/kembali" class="btn btn-primary mb-1">Pengembalian Buku</a>        -->

<table class="table">

<thead class="thead-dark">

<tr>

<th scope="col">No. Peminjaman</th>

<th scope="col">Judul Buku</th>

<th scope="col">Deskripsi Buku</th>

<th scope="col">Kategori Buku</th>

<th scope="col">Tanggal Pinjam</th>

<th scope="col">Tanggal Kembali</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach ($transaksi as $trans)

<tr>

<td>{{ $trans->id }}</td>

<td>{{ $trans->judul_buku }}</td>

<td>{{ $trans->deskripsi }}</td>

<td>{{ $trans->kategori }}</td>

<td>{{ $trans->tgl_pinjam }}</td>

<td>{{ $trans->tgl_kembali }}</td>

<td>

@if($trans->tgl_kembali == null)

<a href="transaksi/edit/{{ $trans->id }}" 

                                class="badge badge-primary">Pengembalian</a>

@else

<p class="badge badge-success">Dikembalikan</p>

@endif

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

@endsection

transaksi->pinjam.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-6">Pinjam Buku</h1>

<hr class="my-4">     

<form action="/transaksi" method="POST" enctype="multipart/form-data">

@csrf

<div class="form-group">

<label for="type_transaksi">Type Transaksi</label>

<select class="form-control" id="type_transaksi" 

                    name="type_transaksi">

<option value="pinjam">Pinjam</option>

</select>

</div>

<div class="form-group">

<label for="id_buku">Kode Buku</label>

<input type="text" class="form-control" id="id_buku" 

                  name="id_buku" placeholder="ID Buku" data-url="{{ url('/') }}">

</div>

<div class="form-group">

<label for="judul_buku">Judul Buku</label>

<input type="text" class="form-control" id="judul_buku" 

                    name="judul_buku" placeholder="Judul Buku" readonly="true">

</div>

<div class="form-group">

<label for="deskripsi">Deskripsi Buku</label>

<input type="text" class="form-control" id="deskripsi" 

                  name="deskripsi" placeholder="Deskripsi Buku" readonly="true">

</div>

<div class="form-group">

<label for="kategori">Kategori Buku</label>

<input type="text" class="form-control" id="kategori" 

                    name="kategori" placeholder="Kategori Buku" readonly="true">

</div>

<div class="form-group">

<div class="row">

<div class="col-sm-6">

<label for="kategori">Tanggal Pinjam</label>

<input type="date" class="form-control" 

                            name="tgl_pinjam">

</div>

<div class="col-sm-6">

<label for="kategori">Tanggal Kembali</label>

<input type="date" class="form-control" 

                            name="tgl_kembali" readonly="true">

</div>

</div>

</div>

<div class="form-group">

<label for="id_anggota">ID Anggota Peminjam</label>

<input type="text" class="form-control" id="id_anggota" 

            name="id_anggota" placeholder="ID Anggota" data-url="{{ url('/') }}">

</div>

<div class="form-group">

<label for="nama_anggota">Nama Peminjam</label>

<input type="text" class="form-control" id="nama_anggota" 

                   name="nama_anggota"  readonly="true">

</div>

<button type="submit" class="btn btn-primary">Simpan</button>

</form>

</div>

</div>

<script>

$(function(){

$('#id_buku').on('change', function(e){

let id_buku = $('#id_buku').val();

console.log(id_buku);

let url = $(this).data('url')+'/transaksi/showBuku/'+id_buku;

console.log(url);

getBuku(url);

})

$('#id_anggota').on('change', function(e){

let id_anggota = $('#id_anggota').val();

console.log(id_anggota);

let url = $(this).data('url')+'/transaksi/getAnggota/'+id_anggota;

console.log(url);

getAnggota(url);

})

})

function getBuku(url){

$.getJSON(url, function(data){

if(data === false){

alert('Buku tidak ditemukan!');

$('#id_buku').val("");

}else{

$('#judul_buku').val(data[0].judul_buku);

$('#deskripsi').val(data[0].deskripsi);

$('#kategori').val(data[0].kategori);

}

});

}

function getAnggota(url){

$.getJSON(url, function(data){

if(data === false){

alert('Data anggota tidak ditemukan!');

$('#id_anggota').val("");

$('#nama_anggota').val("");

}else{

$('#nama_anggota').val(data.nama_anggota);

}

});

}

</script>

@endsection

transaksi->kembali.blade.php

@extends('layout.main')

@section('title', 'Laravel - SI Perpustakaan')

@section('content')

<div class="container">

<div class="jumbotron">

<h1 class="display-6">Pinjam Buku</h1>

<hr class="my-4">     

<form 

    action="{{ action('TransaksiController@update', $pinjaman->id) }}" 

      method="POST">

@csrf

<div class="form-group">

<label for="type_transaksi">Type Transaksi</label>

<select class="form-control" id="type_transaksi" 

                     name="type_transaksi">

<option value="kembali">Kembali</option>

</select>

</div>

<div class="form-group">

<label for="id_buku">Kode Buku</label>

<input type="text" class="form-control" id="id_buku" 

                name="id_buku" value="{{ $pinjaman->id_buku }}" readonly="true">

</div>

<div class="form-group">

<label for="judul_buku">Judul Buku</label>

<input type="text" class="form-control" id="judul_buku" 

           name="judul_buku" value="{{ $pinjaman->judul_buku }}" readonly="true">

</div>

<div class="form-group">

<label for="deskripsi">Deskripsi Buku</label>

<input type="text" class="form-control" id="deskripsi" 

             name="deskripsi" value="{{ $pinjaman->deskripsi }}" readonly="true">

</div>

<div class="form-group">

<label for="kategori">Kategori Buku</label>

<input type="text" class="form-control" id="kategori" 

               name="kategori" value="{{ $pinjaman->kategori }}" readonly="true">

</div>

<div class="form-group">

<div class="row">

<div class="col-sm-6">

<label for="kategori">Tanggal Pinjam</label>

<input type="date" class="form-control" 

           name="tgl_pinjam" value="{{ $pinjaman->tgl_pinjam }}" readonly="true">

</div>

<div class="col-sm-6">

<label for="kategori">Tanggal Kembali</label>

<input type="date" class="form-control" 

                            name="tgl_kembali">

</div>

</div>

</div>

<div class="form-group">

<label for="id_anggota">ID Anggota Peminjam</label>

<input type="text" class="form-control" id="id_anggota" 

            name="id_anggota" value="{{ $pinjaman->id_anggota }}" readonly="true">

</div>

<div class="form-group">

<label for="nama_anggota">Nama Peminjam</label>

<input type="text" class="form-control" id="nama_anggota" 

       name="nama_anggota"  readonly="true" value="{{ $pinjaman->nama_anggota }}">

</div>

<button type="submit" class="btn btn-primary">Simpan</button>

</form>

</div>

</div>

<script>

$(function(){

$('#id_buku').on('change', function(e){

let id_buku = $('#id_buku').val();

console.log(id_buku);

let url = $(this).data('url')+'/transaksi/showBuku/'+id_buku;

console.log(url);

getBuku(url);

})

$('#id_anggota').on('change', function(e){

let id_anggota = $('#id_anggota').val();

console.log(id_anggota);

let url = $(this).data('url')+'/transaksi/getAnggota/'+id_anggota;

console.log(url);

getAnggota(url);

})

})

function getBuku(url){

$.getJSON(url, function(data){

if(data === false){

alert('Buku tidak ditemukan!');

$('#id_buku').val("");

}else{

$('#judul_buku').val(data[0].judul_buku);

$('#deskripsi').val(data[0].deskripsi);

$('#kategori').val(data[0].kategori);

}

});

}

function getAnggota(url){

$.getJSON(url, function(data){

if(data === false){

alert('Data anggota tidak ditemukan!');

$('#id_anggota').val("");

$('#nama_anggota').val("");

}else{

$('#nama_anggota').val(data.nama_anggota);

}

});

}

</script>

@endsection

selanjutnya kita akan menambahkan controller, untuk membuat controller jalankan command berikut :

php artisan make:controller AnggotaController -r

php artisan make:controller BukuController -r

php artisan make:controller KategoriController -r

php artisan make:controller TransaksiController -r

dan kita update masing-masing controller menjadi seperti berikut :

AnggotaController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Anggota;

class AnggotaController extends Controller

{

/**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

public function index()

{

$anggota = Anggota::all();

return view('anggota.index', compact('anggota'));

}

/**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

public function create()

{

return view('anggota.create');

}

/**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

public function store(Request $request)

{

Anggota::create($request->all());

return redirect('anggota')->with('msg','Data Berhasil di Simpan');

}

/**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function show($id)

{

//

}

/**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function edit($id)

{

//

}

/**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function update(Request $request, $id)

{

//

}

/**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function destroy($id)

{

//

}

}

BukuController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use DB;

use App\Buku;

use App\Kategori;

class BukuController extends Controller

{

/**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

public function index()

{

$buku = DB::table('table_buku')

->join('table_kategori', 'table_buku.kategori', '=', 'table_kategori.kategori')

->select('table_buku.id_buku','table_buku.judul_buku', 'table_buku.deskripsi', 

'table_kategori.deskripsi as kategori', 'table_buku.cover_img')

->get();

// return $buku;

return view('buku.index', compact('buku'));

}

/**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

public function create()

{

$kategori = Kategori::all();

return view('buku.create', compact('kategori'));

}

/**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

public function store(Request $request)

{

$this->validate($request, [

'judul_buku' => 'required',

'deskripsi'  => 'required',

]);



$file = $request->file('cover_img');

$buku = new Buku;

$buku->judul_buku = $request->judul_buku;

$buku->deskripsi  = $request->deskripsi;

$buku->kategori   = $request->kategori;

$buku->cover_img  = $file->getClientOriginalName();



$tujuan_upload = 'image';

        $file->move($tujuan_upload,$file->getClientOriginalName());

$buku->save();

return redirect('buku')->with('msg','Data Berhasil di Simpan');

}

/**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function show($id)

{

$buku = Buku::where('id_buku', $id)->first();

return $buku;

}

/**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function edit($id)

{

//

}

/**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function update(Request $request, $id)

{

//

}

/**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function destroy($id)

{

//

}

}

KategoriController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Kategori;

class KategoriController extends Controller

{

/**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

public function index()

{

$kategori = Kategori::all();

// return $kategori;

// return view('kategori.index', compact('kategori'));

return view('kategori/index', compact('kategori'));

}

/**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

public function create()

{

return view('kategori.create');

}

/**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

public function store(Request $request)

{

Kategori::create($request->all());

return redirect('kategori')->with('msg','Data Berhasil di Simpan');

}

/**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function show($id)

{

//

}

/**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function edit($id)

{

//

}

/**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function update(Request $request, $id)

{

//

}

/**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function destroy($id)

{

//

}

}

TransaksiController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use DB;

use App\Buku;

use App\Kategori;

use App\Anggota;

use App\Transaksi;

class TransaksiController extends Controller

{

/**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

public function index()

{

$transaksi = DB::table('table_transaksi')

->join('table_buku', 'table_buku.id_buku', '=', 'table_transaksi.id_buku')

->join('table_kategori', 'table_kategori.kategori', '=', 'table_buku.kategori')

->join('table_anggota', 'table_transaksi.id_anggota', '=', 'table_anggota.id_anggota')

->select('table_transaksi.id','table_anggota.nama_anggota','table_buku.id_buku',

'table_buku.judul_buku', 

'table_buku.deskripsi', 'table_kategori.deskripsi as kategori',

'table_transaksi.tgl_pinjam','table_transaksi.tgl_kembali')

->get();

// return $transaksi;

return view('transaksi.index', compact('transaksi'));

}

/**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

public function create()

{

return view('transaksi.pinjam');

}

/**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

public function store(Request $request)

{

if(Anggota::where('id_anggota', $request->id_anggota)->count() > 0){

if(Buku::where('id_buku', $request->id_buku)->count() > 0){

// return $request;

$transaksi = new Transaksi;

// $transaksi->type_transaksi = $request->type_transaksi;

$transaksi->id_anggota = $request->id_anggota;

$transaksi->id_buku = $request->id_buku;

if($request->type_transaksi == 'pinjam'){

$transaksi->tgl_pinjam = $request->tgl_pinjam;

$transaksi->tgl_kembali = null;

$transaksi->save();

return redirect('transaksi')->with('msg','Data Berhasil di Simpan');

}else{

$transaksi->tgl_kembali = $request->tgl_kembali;

}

// return $transaksi;

}else{

return json_encode('Buku tidak ditemukan!');

}

}else{

return json_encode('Anggota tidak ditemukan');

}

}

/**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function show($id)

{

$pinjaman = DB::table('table_transaksi')

->join('table_buku', 'table_buku.id_buku', '=', 'table_transaksi.id_buku')

->join('table_anggota', 'table_anggota.id_anggota', '=', 'table_transaksi.id_anggota')

->join('table_kategori', 'table_kategori.kategori', '=', 'table_buku.kategori')

->select('table_transaksi.id','table_transaksi.id_anggota', 'table_anggota.nama_anggota',

'table_buku.id_buku', 'table_buku.judul_buku','table_buku.deskripsi',

'table_kategori.deskripsi as kategori','table_transaksi.tgl_pinjam',

'table_transaksi.tgl_kembali')

->where('table_transaksi.id', '=', $id)->first();

return json_encode($pinjaman);

}

public function showBuku($id)

{

// $buku = Buku::where('id_buku', $id)->first();



if(Buku::where('id_buku', $id)->count() > 0){

$buku = DB::table('table_buku')

->join('table_kategori', 'table_buku.kategori', '=', 'table_kategori.kategori')

->select('table_buku.id_buku','table_buku.judul_buku', 'table_buku.deskripsi', 

'table_kategori.deskripsi as kategori', 'table_buku.cover_img')

->where('table_buku.id_buku', '=', $id)

->get();

return $buku;

}else{

return 'false';

}

}

public function getAnggota($id)

{

// $buku = Buku::where('id_buku', $id)->first();



$anggota = Anggota::where('id_anggota', $id)->first();

// return $anggota;

if($anggota === null){

return 'false';

}else{

return $anggota;

}

}

/**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function edit($id)

{

$pinjaman = DB::table('table_transaksi')

->join('table_buku', 'table_buku.id_buku', '=', 'table_transaksi.id_buku')

->join('table_anggota', 'table_anggota.id_anggota', '=', 'table_transaksi.id_anggota')

->join('table_kategori', 'table_kategori.kategori', '=', 'table_buku.kategori')

->select('table_transaksi.id','table_transaksi.id_anggota', 'table_anggota.nama_anggota',

'table_buku.id_buku', 'table_buku.judul_buku','table_buku.deskripsi',

'table_kategori.deskripsi as kategori','table_transaksi.tgl_pinjam',

'table_transaksi.tgl_kembali')

->where('table_transaksi.id', '=', $id)->first();

return view('transaksi.kembali', compact('pinjaman'));

}

/**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function update(Request $request, $id)

{

Transaksi::where('id',$id)

->update(['tgl_kembali' => $request->tgl_kembali]);

return redirect('transaksi')->with('msg','Buku Telah dikembalikan');

}

/**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

public function destroy($id)

{

//

}

}

Terakhir kita tambahkan Route didalam folder Routes/web.php

<?php

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('/', function () {

return view('index');

});

Route::resource('anggota','AnggotaController');

Route::resource('kategori','KategoriController');

Route::resource('buku','BukuController');

Route::resource('transaksi','TransaksiController');

Route::get('transaksi/edit/{id}', 'TransaksiController@edit');

Route::get('transaksi/showBuku/{id}', 'TransaksiController@showBuku');

Route::get('transaksi/getAnggota/{id}', 'TransaksiController@getAnggota');

Route::post('/transaksi/update/{id}', 'TransaksiController@update');

Jika sudah kita coba jalankan dan lihat hasilnya di browser, kita jalankan development server bawaan laravel dengan menjalnakan command berikut :

php artisan serve

kita jalankan localhost:8000 di browser dan hasilnya seperti berikut :

contoh program ini masih sangat sederhana agar mudah di fahami, silahkan dikembangkan lagi untuk menambahkan fasilitan edit data dan login.

Demikian sharing kali ini, semoga bermanfaat... :D

full source code : https://github.com/HusnulM/laravel-perpus

SAP ABAP - Adopt Purchase Requisition Header Note to Purchase Order Header Text

Adopt purchase requisition header note to purchase order header text when creating purchase order with purchase requisition reference using BADI ME_PROCESS_PO_CUST 

Copy this source code to Method : IF_EX_ME_PROCESS_PO_CUST~PROCESS_ITEM

DATA :  LS_MEPOITEM TYPE MEPOITEM.

DATA :  L_HEADER    TYPE REF TO IF_PURCHASE_ORDER_MM,
      LS_HEADER   TYPE MEPOHEADER.

DATA :  IM_TDID         TYPE TDID,
      IM_TEXTLINES    TYPE MMPUR_T_TEXTLINES,
      MMPUR_TEXTLINES TYPE MMPUR_TEXTLINES,
      LT_LINES        TYPE TABLE OF TLINE,
      LS_LINES        TYPE TLINE,
      LV_TDNAME       TYPE THEAD-TDNAME.

LS_MEPOITEM = IM_ITEM->GET_DATA( ).

  CALL METHOD IM_ITEM->GET_HEADER
    RECEIVING
      RE_HEADER = L_HEADER.

  CALL METHOD L_HEADER->GET_DATA
    RECEIVING
      RE_DATA = LS_HEADER.

 
  "Get Purchase Order Header Note 
  IF LS_MEPOITEM-BANFN IS NOT INITIAL AND SY-TCODE = 'ME21N'.
    CLEAR   : LV_TDNAME, LS_LINES, IM_TEXTLINES.
    REFRESH LT_LINES.

    LV_TDNAME = LS_MEPOITEM-BANFN.
    CALL FUNCTION 'READ_TEXT'
      EXPORTING
        CLIENT                                           = SY-MANDT
        ID                                                     = 'B01'
        LANGUAGE                                   = SY-LANGU
        NAME                    = LV_TDNAME
        OBJECT                  = 'EBANH'
      TABLES
        LINES                                              = LT_LINES
      EXCEPTIONS
        ID                                                     = 1
        LANGUAGE                                   = 2
        NAME                    = 3
        NOT_FOUND               = 4
        OBJECT                  = 5
        REFERENCE_CHECK         = 6
        WRONG_ACCESS_TO_ARCHIVE = 7
        OTHERS                                          = 8.

    IF SY-SUBRC = 0.
      LOOP AT LT_LINES INTO LS_LINES.
        CLEAR MMPUR_TEXTLINES.
        MMPUR_TEXTLINES-TDID     = 'F01'.
        MMPUR_TEXTLINES-TDOBJECT = 'EKKO'.
        MMPUR_TEXTLINES-TDFORMAT = LS_LINES-TDFORMAT.
        MMPUR_TEXTLINES-TDLINE   = LS_LINES-TDLINE.
        APPEND MMPUR_TEXTLINES   TO IM_TEXTLINES.
        CLEAR LS_LINES.
      ENDLOOP.
    ENDIF.

    IM_TDID = 'F01'.
    CALL METHOD L_HEADER->IF_LONGTEXTS_MM~SET_TEXT(
      EXPORTING
        IM_TDID      = IM_TDID
        IM_TEXTLINES = IM_TEXTLINES ).
  ENDIF.

Laravel - Contoh Join Table Dengan Laravel

Pada postingan kali ini saya akan share cara menggunakan join table di Laravel, adapun beberpa contoh join table yang aka saya sharing disini antara lain : inner join, left join, right join.

ok langsung saja,,,,,

Inner join

Contoh inner join tanpa where

$buku = DB::table('buku')
->join('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi')
->get();

Contoh inner join dengan where

$users = DB::table('buku')
->join('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi', 'buku.id_buku')
->where('buku.id_buku', '=', $id_buku)
->get();

contoh inner join dengan limit dan order by

$buku = DB::table('buku')
->join('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi')
->limit(10)
->get();

$buku = DB::table('buku')
->join('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi','buku.id_buku')
->orderby('buku.id_buku', '=','asc')
->get();

$buku = DB::table('buku')
->join('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi','buku.id_buku')
->orderby('buku.id_buku', '=','desc')
->get();

Left Join

$buku = DB::table('buku')
->leftJoin('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi')
->get();

Right Join

$buku = DB::table('buku')
->rightJoin('kategori', 'buku.kategori_id', '=', 'kategori.kategori_id')
->select('buku.judul', 'buku.deskripsi', 'kategori.deskripsi')
->get();

Demikian sharing singkat tentang cara penggunaan join di laravel, semoga bermanfaat. :D

Belajar Database SQL Server Untuk Pemula Part2

Melanjutkan postingan Sebelumnya tentang belajar database SQL Server, pada postingan seblumnya saya sudah sharing cara membuat database, membuat table, alter table, dan insert, update, delete, select data di SQL Server.

Pada postingan kali saya akan sharing tentang stored procedure, stored procedure adalah sekumpulan program/query SQL yang tersimpan didalam database dimana didalam stored procedure ini kita bisa melakukan insert, update, delete, select data dan bisa juga memanggil stored procedure lain.

pada postingan Sebelumnya sudah membuat table TB_SISWA seperti berikut :

1. Membuat Stored Procedure Insert Data

CREATE PROCEDURE [dbo].[sp_InsertData] --Nama Stored Procedure
 -- Stored Procedure parameter
 @nis varchar(10),
 @nama varchar(50),
 @alamat varchar(100),
 @tgl_lahir date,
 @j_kelamin varchar(10)
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
  -- Insert statements for procedure here
 INSERT INTO TB_SISWA values(@nis,@nama,@alamat,@tgl_lahir,@j_kelamin)

END

untuk mencoba stored procedure insert data apakah sudah berhasil atau tidak tuliskan query berikut :

sp_InsertData '10001','Budi','Malang','2010-01-01','Laki-laki'

lalu kita coba select data dari table tb_siswa

select * from TB_SISWA

jika kita coba menjalankan query

sp_InsertData '10001','Budi','Malang','2010-01-01','Laki-laki'

akan muncul error seperti ini karena siswa dengan nis 10001 sudah ada didalam table tb_siswa

2. Stored Procedure Update Data

CREATE PROCEDURE [dbo].[sp_UpdateData] --Nama Stored Procedure
 -- Stored Procedure parameter
 @nis varchar(10),
 @nama varchar(50),
 @alamat varchar(100),
 @tgl_lahir date,
 @j_kelamin varchar(10)
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
        
 UPDATE TB_SISWA SET nama = @nama, alamat = @alamat, tg_lahir = @tgl_lahir,
        j_kelamin = @j_kelamin where nis = @nis

END

menjalankan stored procedure update data :

sp_UpdateData '10001','Budi Kuncoro','Surabaya','2010-01-01','Laki-laki'

dan hasilnya akan seperti berikut :

jika kita menjalankan query update tapi dengan nomor induk siswa yang belum ada di tb_siswa tidak akan terlihat error seperti berikut :

sp_UpdateData '10002','Budi Kuncoro','Surabaya','2010-01-01','Laki-laki'

kita update stored procedure sp_updateData menjadi seperti berikut :

ALTER PROCEDURE [dbo].[sp_UpdateData] --Nama Stored Procedure
 -- Stored Procedure parameter
 @nis varchar(10),
 @nama varchar(50),
 @alamat varchar(100),
 @tgl_lahir date,
 @j_kelamain varchar(10)
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
    
 if NOT EXISTS(select * from tb_siswa where nis = @nis)
  begin
   select 'Data siswa tidak ditemukan'
  end
 else    
  UPDATE TB_SISWA SET nama = @nama, alamat = @alamat, 
                tg_lahir = @tgl_lahir, j_kelamin = @j_kelamain where nis = @nis

END

kita tambahkan kondisi pengecekan apakah data siswa berdasarkan nis sudah ada di table apa belum, jika tidak ada akan muncul Data siswa tidak ditemukan

3. Stored Procedure Delete Data

CREATE PROCEDURE [dbo].[sp_DeleteData] --Nama Stored Procedure
 -- Stored Procedure parameter
 @nis varchar(10)
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
    
 if NOT EXISTS(select * from tb_siswa where nis = @nis)
  begin
   select 'Data siswa tidak ditemukan'
  end
 else    
                begin
          DELETE TB_SISWA where nis = @nis
                        select 'Data siswa berhasil dihapus'
                end

END

4. Stored Procedure Select Data

CREATE PROCEDURE [dbo].[sp_GetData] --Nama Stored Procedure
 -- Stored Procedure parameter
 @nis varchar(10)
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
        
        if (@nis = '')
          begin
             select * from tb_siswa
          end
        else
 if NOT EXISTS(select * from tb_siswa where nis = @nis)
  begin
   select 'Data siswa tidak ditemukan'
  end
 else    
  select * from TB_SISWA where nis = @nis

END

Menggunakan Wikipedia API Dengan P5 JS dan Bootstrap

Pada postingan kali ini saya akan sharing menggunakan API wikipedia dengan P5.JS dan Bootstrap.

pertama-tama kita buat folder dengan nama wiki-api dan didalamnya buat file index.html seperti berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Wikipedia API</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="p5.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="">Wikipedia - API</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  

  <div class="container mt-3">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="input-group mb-3">
          <input type="text" id="userinput" class="form-control" placeholder="Search..." aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-primary ml-2" type="button" id="btn-search">Search <i class="fa fa-search"></i></button>
          </div>
        </div> 
      </div>
    </div>
    <hr>

    <div class="row"> 
      <h2 id="wiki-header"></h2>
      <ul class="list-group" style="width: 100%;" id="wiki-list">
        
      </ul>       

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</body>
</html>

untuk P5.JS bisa di download DISINI setelah itu buat file script.js dan tuliskan source code seperti berikut :

let userInput;
let searchUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=";
// let contentUrl = 'https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=';
// let counter = 0;

function setup() {
  noCanvas();
  userInput = select('#userinput');
  userInput.changed(startSearch);

  function startSearch(){
    counter = 0;
    goWiki(userInput.value());
  }

  function goWiki(term){
      let url  = searchUrl + term;
      loadJSON(url, gotData, 'jsonp');
  }

  function gotData(ouput){
    console.log(ouput[3][1]);

    let results = ouput[1];

    if (results.length > 0){
      $('#wiki-list').html('');
      $('#wiki-header').html('');
      
      $('#wiki-header').append(userInput.value() + " results");

      $.each(results, function(i, data){
        $('#wiki-list').append(`
            <li class="list-group-item d-flex justify-content-between align-items-center form-control">
            `+ data +`
              <a href="`+ ouput[3][i] +`" target="_blank">
                <span class="badge badge-primary badge-pill">Lihat Detail</span>
              </a>
            </li> 
        `);
      })
    }else{
      $('#wiki-header').append("No results found for " + userInput.value());
    }
    userInput.value("");
  }
}

Jika sudah coba di jalankan, maka hasilnya akan seperti berikut :

jika kita langsung mengakses url API-nya tampilannya seperti berikut :

sekian postingan kali ini semoga bermanfaat :D