Kali ini kita akan membuat teknik parsing data json pada codeigniter 3, yang sumber datanya bukan berasal dari database dalam aplikasi tetapi dari sumber data di luar. Banyak sekali sumber data yang berupa opendata yang tersedia di jagad maya ini. Kalian dapat mencoba dengan sumber data yang lainnya.
Kali ini penulis mengambil sumber data dari https://kodepos-2d475.firebaseio.com/kota_kab/k69.json?print=pretty
Nah, mari kita membuatnya dengan mengikuti langkah-langkah berikut.
Membuat Controller
Buat sebuah controller dengan nama Parsingjson.php, kemudian ketikkan script berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Parsingjson extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $sumber = 'https://kodepos-2d475.firebaseio.com/kota_kab/k69.json?print=pretty'; $konten = file_get_contents($sumber); $data = array( 'record' => json_decode($konten, true), ); $this->load->view('parsingjson', $data); } } |
Membuat View
Buat view dengan nama parsingjson.php, kemudian ketikkan script berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <title>Codeigniter - Parsing Data Json</title> <!-- Font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&display=swap" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- Datatables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <style> body { font-family: 'Oswald', sans-serif; font-weight: 300; } </style> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> Parsing Data Json di CodeIgniter 3 </div> <div class="card-body"> <div class="responsive"> <table id="list_data" class="table display row-border table-striped compact" style="width: 100%;"> <thead> <tr> <th style="width: 30px;">No</th> <th>Kelurahan</th> <th>Kecamatan</th> <th>Kodepos</th> </tr> </thead> <tbody> <?php $no = 1; foreach ($record as $dt) { ?> <tr> <td class="text-center"><?php echo $no; ?></td> <td><?php echo $dt['kelurahan']; ?></td> <td><?php echo $dt['kecamatan']; ?></td> <td><?php echo $dt['kodepos']; ?></td> </tr> <?php $no++; } ?> </tbody> </table> </div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#list_data').DataTable(); }); </script> </body> </html> |
Nah, jika langkah-langkah yang diikuti sudah benar, maka akan di dapatkan tampilan sebagai berikut.
Mudah bukan? Semoga bermanfaat.
klo untuk buat detail pagena gimana bang?pas di klik kluar result full na?
untuk bikin detail page gimana gan? pas user klik nama kelurahan-> get $id->load view(kelurahan-detail) ^