Membuat Aplikasi Al-Quran dengan Rest API Laravel part #1

Membuat Aplikasi Al-Quran dengan Rest API Laravel part #1

Assalamualaikum warahmatullahi wabarakaatuh, pada kesempatan kali ini kita akan membuat aplikasi al-quran dengan Laravel, dimana dalam implementasi kita akan menggunakan rest api sebagai jembatan untuk mengguhungkan antara server dengan client.

Untuk hasil dari tutorial kali ini teman-teman dapat mengakses Media Islam, website tersebut merupakan contoh dari hasil akhir pada sesi membuat aplikasi al-quran dengan rest api laravel. Dimana fitur yang tersedia yaitu:

  • Al-quran Digital
  • Dilengkapi dengan murotal 3 Qory
  • Dilengkapi terjamahan
  • Tafsir ayat
  • Asmaul Husna
  • kolom Search (Pencarian)
  • Do’a Tahlil
  • Bacaan Sholat
  • Do’a Harian
  • Niat Sholat
  • Kisah Para Nabi
  • Hadist 9 Imam

Diatas merupakan fitur-fitur yang tersedia atau yang akan dibuat pada sesi membuat aplikasi al-quran dengan rest api laravel. Oke langsung saja kita buat aplikasinya.

Baca Juga : Instalasi Framework Laravel

Membuat Aplikasi Al-quran Laravel

Pada tahapan awal yang akan kita persiapkan yaitu membuat project laravel dengan nama digitalquran.

Persiapan dan Installasi Project Laravel

Langkah pertama kita buka CMD (Command Prompt) lalu pastikan komputer teman-teman terhubung kedalam internet selanjutnya masuk kedalam directory htdocs, setelah itu jalankan perintah:

composer create-project laravel/laravel digitalquran

Untuk lebih jelasnya silahkan perhatikan gambar berikut ini:

Installasi Framework Laravel

Silahkan tunggu sampai proses installasi selesai, selanjutnya masuk kedalam project yang baru saja kita buat yaitu dengan mengetika perintah cd digitalquran. Selanjutnya buka xampp lalu running bagian Apache seperti berikut:

Running Apache

Tahapan selanjutnya yaitu menjalankan project dengan cara mengetikan perintah:

php artisan serve

Maka secara otomaris server akan melakukan running aplikasi dan kita dapat mengakses dengan cara mengunjungi URL berikut:

 http://127.0.0.1:8000

Maka tampilan awal dari aplikasi yang sudah berhasil kita install akan tampak seperti berikut ini:

Langkah installasi sudah selesai selanjutnya kita masuk pada tahapan coding, silahkan simak pembahan berikut ini.

Tahapan Coding Aplikasi Al-Quran

Pertama-tama silahkan buat controller baru dengan nama QuranController, untuk membuat controller tentunya caranya sangat mudah. Silahkan buka project yang sudah kita instal kedalam aplikasi text editor disini admin menggunakan aplikasi Visual Studio Code, lalu pada terminal jalankan perintah berikut:

php artisan make:controller QuranController

Silahkan enter, untuk lebih jelasnya maka hasilnya seperti berikut:

QuranController

Pada bagian atas tambahkan fungsi atau package yaitu:

use Illuminate\Support\Facades\Http;

Itu digunakan untuk dapat menjalankan HTTP request kedalam server, Selanjutnya buat fungsi baru dengan nama index, lalu buat script untuk memanggil data quran dari rest api, contoh code nya seperti berikut:

public function index(){
        $response = Http::get('https://raw.githubusercontent.com/penggguna/QuranJSON/master/quran.json');
        return $response->json();
    }

Pembahan script:

  • Function index digunakan untuk penamaan dari fungsi.
  • $respon merupakan nama variabel yang menampung nilai dari rest api
  • return $response->json(); digunakan untuk mengembalikan nilai dalam bentuk script json.

Selanjutnya buat Route baru dengan nama /quran, silahkan buka file web.php lalu tambahkan script berikut ini:

//Quran ===================
Route::get('quran',[QuranController::class,'index']);

Selanjutnya jalankan aplikasi dengan perintah php artisan serve, jika server sudah running maka selanjutnya silahkan akses url berikut:

http://127.0.0.1:8000/quran

Jika tidak terdapat kendala, maka hasilnya akan seperti berikut:

http://127.0.0.1:8000/quran

Kita sudah berhasil mengakses data json dari Rest API al-quran secara keseluruhan, selanjutnya kita akan membuat untuk dapat mengakses berdasarkan id atau salah salah surah saja, silahkan teman teman buat function baru dengan nama indexId, untuk scriptnya silahkan ikuti seperti dibawah ini:

public function indexId($id){
        $response = Http::get("https://raw.githubusercontent.com/penggguna/QuranJSON/master/surah/$id.json");
        return $response->json();
    }

Selanjutnya pada bagian Route tambahkan script untuk memanggil fungsi yang kita buat untuk memanggil Id dari salah satu surat

Route::get('quran/{id}',[QuranController::class,'indexId']);

Silahkan teman-teman jalankan kembali severnya dan akses url: http://127.0.0.1:8000/quran/1, maka hasilnya akan seperti berikut ini:

http://127.0.0.1:8000/quran/1

Kita sudah berhasil mengakses data dari rest api, selanjutnya kita akan membuat template atau design yang akan digunakan untuk menambilkan data supaya data yang didapat dari server dengan format JSON akan terlihat lebih cantik dan menarik. Oke langsung saja kita bahas.

Tahapan Penerapan Template Website

Langkah pertama dalam tahapan penerapan template website yaitu, admin sudah menyediakan asset pada github silahkan teman-teman kunjungi dan download terlebih dahulu untuk assetnya. Kemudian asset tersebut akan kita simpat pada project digitalquran->public. Linknya dibawah ini:

https://github.com/Muhammad-Rizal-Supriadi/asset-digitalquran/tree/master

Silahkan kunjungi lalu download asset tersebut selanjutnya pastekan pada directori public seperti berikut ini:

public

Jika sudah seperti itu, selanjutnya kita akan membuat file blade baru dengan nama index.blade.php pada folder view dan ikuti script dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DigitalQuran</title>
    <link rel="stylesheet" href="{!! asset('css/bootstrap.min.css')!!}">
    <link rel="stylesheet" href="{!! asset('style.css') !!}">
    <script src="https://kit.fontawesome.com/8b969e22b4.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Digital <span class="food">Quran</span></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="dropdown" style="margin-left: 800px;">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Pilih Menu
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="/">Home</a>
            <a class="dropdown-item" href="/quran">Qur'an</a>
          </div>
        </div>
          <!-- <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link active" href="#home"><span class="food">Home</span> </a>
            <a class="nav-item nav-link" href="#home"><span class="food">Qur'an</span> </a>
            <a class="btn btn-primary btn-lg btn-menu" href="booktable.html" role="button">About</a>
          </div> -->
        </div>
     </div>
    </nav>
    <!-- Header -->

    <!-- Hero Image --
    <div class="jumbotronn" id="home" style="height: 100px;">
       <div class="dark">
          <div class="text-center">
            <h1 class="display-4">Welcome To The Restaurant <span class="food">Foods</span></h1>
            <p class="about text-center" id="about" style="color: white;">Bacaan Tahlil</p>
          </div>
        </div>
      </div>
   
    <!-- About -->
    
    
    <div class="container" style="margin-top: 250px;">
            @yield('content')
    </div>

    <!-- Click to Action -->
      <div id="cta">
          <div class="dark-overlay">
              <div class="cloud-overlay">
                  <div class="container">
                      <div class="row">
                          <div class="col-lg-12 mx-auto text-center">
                              <h3 class="display-4">Media <span class="food">Islam</span></h3>
                              <h5>Informasi Mengenai Ajaran Islam dan<br>Ilmu Al-Qur'an</h5>
                              <h3 style="color: aliceblue;margin-top: 25px;">CONTACT INFORMATION</h3>
                              <div class="py-3">
                                  <i class="fas fa-phone"><br><p style="color: aliceblue;">Phone<br>
                                    <h5>+6287730426513 (Toll Free).</h5></p>
                                  </i>
                                  <i class="fas fa-map-marked-alt"><br><p style="color: aliceblue;">Adress
                                    <br><h5>Cikambuy Hilir, Kec.Katapang, Kab.Bandung.</h5></p>
                                  </i>
                                  <i class="fas fa-envelope"><br><p style="color: aliceblue;">Email
                                    <br><h5>info@mediaislam.com.</h5></p>
                                  </i>
                              </div>
                              <!-- <h4>SHARE THE TASTE</h4>
                              <div class="py-4">
                                 <i class="fas fa-facebook"  style="color: aliceblue;"><br>Facebook</i>
                                 <i class="fas fa-twitter"  style="color: aliceblue;"><br>Twitter</i>
                                 <i class="fas fa-facebook"  style="color: aliceblue;"><br>Instagram</i>
                                 <i class="fas fa-facebook"  style="color: aliceblue;"><br>You Tube</i> 
                              </div> -->
                            </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    <!-- Footer -->
    <footer class="py-5 bg-dark text-center text-white">
        <p>Copyright 2021 || Powered By Muhammad Rizal Supriadi Media Islam</p>
    </footer>

  <!-- <script>
    window.sr = ScrollReveal();
    sr.reveal('.container',{duration:1000});
    sr.reveal('.container-fluid',{duration:1000});
    sr.reveal('.row',{duration:1000});
    sr.reveal('.cols3',{duration:1000});
  </script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
  <script src="js/bootstrap.min.js"></script> 
  <script>
  $(document).ready(function(){
    $("a").on('click', function(event) {
     if (this.hash !== "") {
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 3000, function(){
          window.location.hash = hash;
        });
      } // End if
    });
  });
  </script>
</body>
</html>

Setelah membuat file index.blade.php pada directory views, langkah selanjutnya yaitu membuat folder baru dengan nama quran pada folder views untuk lebih lengkapnya seperti gambar berikut:

views->quran

Selanjutnya kita akan membuat file baru didalam folder quran dengan nama index.blade.php untuk scriptnya silahkan ikuti script dibawah ini:

@extends('index')
@section('content')
<div class="jumbotronn" id="home" style="margin-top:-140px;margin-bottom:20;">
       <div class="dark">
          <div class="text-center">
            <p class="about text-center" id="about" style="color: white;">Daftar Surat</p>
          </div>
        </div>
      </div>
      <br>
<table class="table table-striped" style="width: 1300px;margin-left:-100px;">
  <thead style="background-color: rgba(255,77,0,1);color:white;">
    <tr>
      <th scope="col">No</th>
      <th scope="col">Nama Surah</th>
      <th scope="col">Nama Latin</th>
      <th scope="col">Arti</th>
      <th scope="col">Jumlah Ayat</th>
      <th scope="col">Tempat Turun</th>
      <th scope="col">Tipe</th>
      <th scope="col">Audio</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($response as $niat)
    <tr>
      <th scope="row">{{$niat->number_of_surah}}</th>
      <td>{{$niat->name_translations->ar}} <br>
        <center>
        <a href="quran/{{$niat->number_of_surah}}">
          <button class="btn btn-primary btn-sm btn-menu">Lihat Surah</button>
        </a>
        </center>
    </td>
      <td>{{$niat->name}}</td>
      <td>{{$niat->name_translations->id}}</td>
      <td>{{$niat->number_of_ayah}}</td>
      <td>{{$niat->place}}</td>
      <td style="text-align: justify;">{{$niat->type}}</td>
      <td>
          <figure>
            <figcaption>Dengarkan Murotal:</figcaption>
            <audio src="{{$niat->recitation}}" controls></audio>
            <!-- <audio
                controls
                src="https:\/\/equran.id\/content\/audio\/001.mp3">
                    Your browser does not support the
                    <code>audio</code> element.
            </audio> -->
        </figure>
    </td>
    </tr>
    @endforeach
  </tbody>
</table>
<hr style="background-color: rgba(255,77,0,1);height:5px;">
@endsection

Dalam script diatas kita melihat terdapat suatu perulangan dengan menggunakan foreach dimana foreach ini digunakan untuk menampilkan data atau mengambil dari yang sudah dibuat didalam controller, tentunya untuk dapat menampilkan data kedalam view kita harus mengubah dibagian QuranController pada function index yaitu dengan mengubah return yang asalnya dengan format json saja menjadi return kedalam view index.blade.php, silahkan teman-teman buka file QuranController dan pada function index ubah scriptnya menjadi seperti berikut:

public function index(){
        $response = Http::get('https://raw.githubusercontent.com/penggguna/QuranJSON/master/quran.json');
        //return $response->json();
        return view('quran.index',[
            'response'=>json_decode($response)
        ]);
    }

Selanjutnya silahkan teman-teman ketikan perintah php artisan serve , lalu akses url: http://127.0.0.1:8000/quran, maka akan tampil seperti gambar berikut ini:

http://127.0.0.1:8000/quran

Alhamdulillah kita sudah berhasil menampilkan daftar surat dengan kedalam halaman website, tetapi ketika kita mengakses halaman atau menekan tombol lihat surah, maka masih tampil seperti berikut:

Json

Untuk mengubahnya kita akan membuat file baru pada folder quran dengan nama indexId.blade.php dan ikuti script dibawah ini:

@extends('index')
@section('content')
<div class="jumbotronn" id="home" style="margin-top:-140px;margin-bottom:20;">
       <div class="dark">
          <div class="text-center">
            <p class="about text-center" id="about" style="color: white;">{{$response->name_translations->ar}}</p>
          </div>
        </div>
      </div>
      <br>
<center>      
<div class="card text-center" style="width:50%;">
  <div class="card-header btn btn-primary">
    <strong> {{$response->name}} </strong>
  </div>
  <div class="card-body">
    <p class="card-text">
      <table style="text-align: left;margin:20px;">
        <tr>
          <td>Arti</td>
          <td>:</td>
          <td>{{$response->name_translations->id}}</td>
        </tr>
        <tr>
          <td>Nomor Surah</td>
          <td>:</td>
          <td>{{$response->number_of_surah}}</td>
        </tr>
        <tr>
          <td>Bayak Ayat</td>
          <td>:</td>
          <td>{{$response->number_of_ayah}}</td>
        </tr>
        <tr>
          <td>Tipe Surah</td>
          <td>:</td>
          <td>{{$response->type}}</td>
        </tr>
      </table>
    </p>
  </div>
  <div class="card-footer text-muted">
  <strong style="margin-bottom: 50px;"><b><u>Dengarkan Murotal:</u></b></strong>
  <figure>
            
            <br>
            @foreach($response->recitations as $audio)
            <p>{{$audio->name}}</p>
            <audio src="{{$audio->audio_url}}" controls></audio>
            <!-- <audio
                controls
                src="https:\/\/equran.id\/content\/audio\/001.mp3">
                    Your browser does not support the
                    <code>audio</code> element.
            </audio> -->
        </figure>
        @endforeach
  </div>
</div>
</center>
<br>

<table class="table table-striped" style="width: 1300px;margin-left:-100px;"> 
  <thead>
    <tr>
      <td colspan="4" style="background-color: rgba(255,77,0,1);color:white;text-align:center;"><strong> Ayat {{$response->name}}</strong></td>
    </tr>
    <tr>
      <th scope="col">Ayat</th>
      <th scope="col">Lafazh</th>
      <th scope="col">Bahasa Inggris</th>
      <th scope="col">Bahasa Indonesia</th>
    </tr>
  </thead>
  <tbody>
   @foreach($response->verses as $ayat)
    <tr>
      <td>{{ $ayat->number }}</td>
      <td>{{ $ayat->text }}</td>
      <td>{{ $ayat->translation_en }}</td>
      <td>{{ $ayat->translation_id }}</td>
    </tr>
    @endforeach
  </tbody>
</table>
<div class="card text-center">
  <div class="card-header btn btn-primary">
    <strong> Tafsir {{$response->name}} </strong>
  </div>
  <div class="card-body">
  <p class="card-text">
      <table style="text-align: left;margin:20px;">
        <tr>
          <td>Penerbit Tafsir</td>
          <td>:</td>
          <td>{{$response->tafsir->id->kemenag->name}}</td>
        </tr>
        <tr>
          <td>Keterangan</td>
          <td>:</td>
          <td>{{$response->tafsir->id->kemenag->source}}</td>
        </tr>
      </table>
    </p>
    
  </div>
  <div class="card-footer text-muted">
  </div>
  <div class="card-body">  
  @foreach($response->tafsir->id->kemenag->text as $key => $ayat)
    <strong>Ayat : {{ $key }}</strong> <br><p style="text-align: justify;"> Tafsir : {{ $ayat }} </p>
    <hr>
    <hr>
  @endforeach
  </div>
  <a href="/quran" class="btn btn-primary">Kembali</a>
</div>
<hr style="background-color: rgba(255,77,0,1);height:5px;">
@endsection

Script diatas digunakan untuk menampilkan data berdasarkan surah yang dipilih, dimana data-data yang ditampilkan yaitu terdapat 3 buah muratal yang berbeda dan juga disertai dengan tafsir per ayat.

Oke jika sudah selanjutnya buka kembali file QuranController.php dimana kita akan mengubah pada fungction indexId menjadi seperti script berikut ini:

public function indexId($id){
        $response = Http::get("https://raw.githubusercontent.com/penggguna/QuranJSON/master/surah/$id.json");
        //return $response->json();
        return view('quran.indexId',[
            'response'=>json_decode($response)
        ]);
    }

Untuk Struktur folder dan filenya, teman-teman dapat melihat seperti gambar dibawah ini untuk menghindari kesalahan atau kekeliruan:

Struktur file

Selanjutnya silahkan refresh dan klik kembali tombol surah Lihat Surah maka berikut merupakan hasilnya:

Bagian atas

Pada bagian atas, tentunya akan tampak seperti berikut dimana terdapat nama dari surah yang dipilih , dan terdapat 3 muratal yang berbeda dari para qori. Dan kita dapat menjalankan muratal-muratal tersebut jika koneksi dalam keadaan bagus.

Bagian tengah

Pada bagian tengah terdapat lafazh dan arti setiap ayat dari surah yang kita pilih, untuk gambar diatas merupakan ayat-ayat yang terdapat dalam surat al-fatihah.

Bagian Bawah

Pada bagian bawah terdapat tafsif, dengan keterangan penerbit yaitu kemenag, dimana tafsir yang ditampilkan sesuai dengan standar kemenag dan dibahas secara terperinci dengan tafsif per ayat nya.

Kesimpulan

Alhamdulillah kita sudah berhasil membuat aplikasi al-quran dengan menampilkan data json kedalam view, tutorial seri pembuatan aplikasi al-quran dengan framework laravel terdapat beberapa bagian lagi dimana kita baru saja mengimplementasikan al-quran, Untuk tutorial kelanjutannya silahkan kunjungi link berikut:

Terimakasih sudah berkunjung dan membaca artikel ini mengenei pembuatan aplikasi al-quran dengan menggunakan framework laravel part 1.

Terimakasih, Salam Success 🙂

By: Muhammad Rizal Supriadi

Leave a Comment

Your email address will not be published. Required fields are marked *