Codelapan
  • Home
  • Bootstrap
  • Codeigniter
  • Katalon
  • Laravel
    • Home
    Topics
    Laravel

    Laravel
    Livewire

    Livewire
    Software Testing

    Testing
    bootstrap

    Bootstrap
    source code

    Code
    HTML

    HTML
    CSS

    CSS
    Javascript

    Javascript
    jQuery

    jQuery

    Codelapan
    Membuat Website Jadwal Sholat Dengan API Fathimah Bot

    Membuat Website Jadwal Sholat Dengan API Fathimah Bot

    Admin
    Admin・ 27 April 2021
    6 min read ・ 3942 views

    API Jadwal Sholat - Membuat website yang berisikan informasi mengenai jadwal sholat di suatu daerah tentu akan sangat berguna dan bermanfaat bagi orang lain (khususnya bagi muslim). Terlebih lagi untuk orang yang sedang pergi di suatu daerah dan belum tahu jadwal sholat di daerah tersebut.

    Di artikel kali ini saya akan membagikan artikel yang akan membahas bagaimana cara membuat website sederhana yang dapat memuat jadwal sholat. Pada latihan kali ini saya akan menggunakan laravel sebagai PHP framework dan API Fathimah Bot sebagai penyedia API jadwal sholat.

    Sama seperti artikel-artikel yang pernah saya bagikan sebelumnya, pada artikel ini kita akan memulainya dari nol yaitu mulai dari install laravel sampai belajar bagaimana cara menggunakan API Fathimah BOT untuk menampilkan jadwal sholat. Disini nanti kita akan menggunakan Http Client untuk menggunakan API dan menampilkan data dari API Fathimah Bot. OK, langsung saja ke percobaan.

    composer create-project laravel/laravel jadwalsholat

    Kita awali dengan menginstall projek laravel terbaru via composer. Jalankan command di atas pada terminal teman-teman dan tunggu sampai proses selesai. Disini kita akan menginstall projek laravel yang akan diberi nama "jadwalsholat", tapi jika mau pakai nama lain juga tidak masalah.

    Route::get('/', function () {
    $schedule = Http::get('https://api.banghasan.com/sholat/format/json/jadwal/kota/742/tanggal/'.date("Y-m-d"))->json()['jadwal']['data'];
    return view('welcome', compact('schedule'));
});

    Jika proses installasi sudah selesai, sekarang silahkan buka file routes/web.php. Pada route::get('/'), ubah menjadi seperti kode di atas. Penjelasan singkat mengenai kode di atas, jadi saya ingin menampilkan jadwal sholat hari ini untuk wilayah Kabupaten Banyuwangi. Jika kalian perhatikan, kode 742 di atas merupakan kode Kabupaten Banyuwangi. Untuk kode kota lain bisa dilihat disini, atau di URL https://api.banghasan.com/sholat/format/json/kota. 

    use Illuminate\Support\Facades\Http;

    Kemudian masih di routes/web.php, jangan lupa untuk menggunakan atau import facades Https seperti di atas.

    <?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Http;

/*
|--------------------------------------------------------------------------
| 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 () {
    $schedule = Http::get('https://api.banghasan.com/sholat/format/json/jadwal/kota/742/tanggal/'.date("Y-m-d"))->json()['jadwal']['data'];
    return view('welcome', compact('schedule'));
});

    Sehingga secara keseluruhan, kode yang ada di routes/web.php akan menjadi seperti di atas. Teman-teman juga bisa langsung copy kode di atas lalu replace semua kode di web.php.

    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8" style="color: #fff">
                <marquee>
                    Jadwal sholat hari ini atau tanggal {{ date("d F Y") }} untuk wilayah Kab. Banyuwangi, <strong>Subuh: {{ $schedule['subuh'] }} WIB</strong> | <strong>Dzuhur: {{ $schedule['dzuhur'] }} WIB</strong> | <strong>Ashar: {{ $schedule['ashar'] }} WIB</strong> | <strong>Magrib: {{ $schedule['maghrib'] }} WIB</strong> | <strong>Isya: {{ $schedule['isya'] }} WIB</strong>
                </marquee>
            </div>
        </div>
    </body>
</html>

    Setelah memperbarui kode yang ada di file routes/web.php, sekarang kita perbarui kode yang ada di welcome.blade.php dengan kode di atas. Dengan kode di atas, akan menghasilkan running text yang berisi tentang informasi jadwal sholat hari ini untuk wilayah Kabupaten Banyuwangi.

    Sekian artikel tutorial yang singkat ini, silahkan teman-teman untuk mencobanya dan untuk penggunaan API Jadwal Sholat variasi lainnya bisa dibaca dan dipelajari di situs resminya di https://fathimah.docs.apiary.io. Jika ada saran, kritik, masukan atau apapun yang ingin didiskusikan, silahkan tulis komentar kalian di form komentar di bawah ini. Sampai jumpa di artikel dengan bahasan lain berikutnya.

    Laravel
    Artikel Sebelumnya

    Membuat REST API Auth (Register & Login) dengan Lu...
    Artikel Selanjutnya

    Menambahkan Validasi Password di Laravel
    Tinggalkan Komentar
    Loading Comments
    Favorit See All