Membuat Aplikasi Alquran dengan Laravel

Membuat aplikasi Al-Qur’an dengan Laravel bisa menjadi proyek yang bermanfaat, terutama bagi yang ingin menyediakan akses mudah ke Al-Qur’an secara online. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat aplikasi Al-Qur’an sederhana menggunakan Laravel.

1. Instalasi Laravel

Jalankan perintah berikut untuk membuat proyek baru:

composer create-project --prefer-dist laravel/laravel alquran-app<br>cd alquran-app

Setelah itu, jalankan Laravel dengan perintah:

php artisan serve

Akses aplikasi melalui browser di http://localhost:8000.

2. Tambahkan Database

Buat database baru dan sesuaikan .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=alquran_db
DB_USERNAME=root
DB_PASSWORD=

Setelah itu, jalankan perintah berikut untuk memperbarui konfigurasi:

php artisan config:clear

3. Model & Migration

Jalankan perintah berikut untuk membuat model dan tabel untuk menyimpan data Al-Qur’an:

php artisan make:model Surah -m

Edit migration di database/migrations/xxxx_xx_xx_create_surahs_table.php:

public function up()
{
    Schema::create('surahs', function (Blueprint $table) {
        $table->id();
        $table->integer('number')->unique();
        $table->string('name');
        $table->string('english_name');
        $table->text('revelation_place');
        $table->integer('number_of_ayahs');
        $table->timestamps();
    });
}

Lalu jalankan:

php artisan migrate

4. API Al-Qur’an

Gunakan API seperti Al-Quran Cloud API atau quran.com untuk mengambil data:
Edit routes/web.php:

use Illuminate\Support\Facades\Http;
use App\Models\Surah;

Route::get('/import-quran', function () {
    $response = Http::get('https://api.alquran.cloud/v1/surah');
    $data = $response->json();

    foreach ($data['data'] as $surah) {
        Surah::updateOrCreate(
            ['number' => $surah['number']],
            [
                'name' => $surah['name'],
                'english_name' => $surah['englishName'],
                'revelation_place' => $surah['revelationType'],
                'number_of_ayahs' => $surah['numberOfAyahs']
            ]
        );
    }
    return "Data Al-Qur'an berhasil diimpor!";
});

Akses di browser: http://localhost:8000/import-quran

5. Buat Controller & Tampilan

Buat controller:

php artisan make:controller QuranController

Edit app/Http/Controllers/QuranController.php:

use App\Models\Surah;

public function index() {
    $surahs = Surah::all();
    return view('quran.index', compact('surahs'));
}

Edit routes/web.php:

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

Buat tampilan di resources/views/quran/index.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Daftar Surah</h1>
    <ul>
        @foreach($surahs as $surah)
            <li>{{ $surah->number }}. {{ $surah->name }} ({{ $surah->english_name }})</li>
        @endforeach
    </ul>
</div>
@endsection

6. Jalankan Laravel

Jalankan server:

php artisan serve

Akses: http://localhost:8000/quran