{"id":51227,"date":"2024-10-28T14:58:51","date_gmt":"2024-10-28T07:58:51","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51227"},"modified":"2024-10-28T14:58:53","modified_gmt":"2024-10-28T07:58:53","slug":"cara-membuat-maps-di-codeigniter","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-maps-di-codeigniter\/","title":{"rendered":"Cara Membuat Maps di CodeIgniter Melalui Leaflet"},"content":{"rendered":"\n<p>Setelah sebelumnya kami membahas tentang cara <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-membuat-map-di-laravel\/\" target=\"_blank\" rel=\"noopener\" title=\"membuat maps di laravel\">membuat Maps di Laravel<\/a>, kali ini kami akan membahas tentang cara membuat <em>maps <\/em>di CodeIgniter versi 3 dan 4. Simak artikel ini untuk mengetahui langkah-langkahnya!<\/p>\n\n\n\n\n\n<p><a href=\"https:\/\/blog.rumahweb.com\/apa-itu-codeigniter-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"CodeIgniter adalah\">CodeIgniter<\/a> adalah salah satu <em>framework <\/em>PHP dengan konsep MVC (Model-View-Controller) yang dapat digunakan untuk membuat website dinamis berbasis PHP. Dengan CodeIgniter, Anda dapat menambahkan berbagai fungsi pada website untuk membuat tampilannya lebih informatif, salah satunya adalah <em>maps <\/em>atau peta. <\/p>\n\n\n\n<p>Ada beberapa cara yang dapat Anda gunakan untuk membuat <em>maps <\/em>di CodeIgniter, seperti melalui API Google Maps hingga menggunakan Leaflet yang tidak membutuhkan akses API.<\/p>\n\n\n\n<p>Dalam artikel ini, kami akan membahas cara membuat <em>maps <\/em>di CodeIgniter versi 3 dan 4 menggunakan <em>library <\/em>Leaflet, karena kemudahannya dalam proses pembuatan yang hanya membutuhkan nilai latitude\/longitude (Lintang\/Bujur) dan<em> library<\/em> Leaflet nya  saja.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu leaflet?<\/h2>\n\n\n\n<p>Leaflet adalah <em>library <\/em>JavaScript yang digunakan untuk membuat peta interaktif secara mudah. Selain itu, Leaflet termasuk dalam aplikasi <em>open source<\/em>, sehingga dapat Anda gunakan dan modifikasi secara gratis tanpa harus membayar lisensinya.<\/p>\n\n\n\n<p>Leaflet dirancang untuk menampilkan peta atau <em>maps <\/em>sederhana, namun ringan ketika diakses. Tidak hanya itu, Leaflet memiliki beragam fitur yang memudahkan pengembang menambahkan peta ke situs web atau aplikasi web mereka.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat maps di Codeigniter<\/h2>\n\n\n\n<p>Dalam panduan membuat <em>maps <\/em>di CodeIgniter, kami akan memberikan contoh pembuatan <em>maps <\/em>melalui <em>library <\/em>Leaflet pada versi CI3 dan CI4. Seperti apa, simak informasi berikut ini.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cara Membuat Maps di CodeIgniter 3<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download terlebih dahulu file leafleat <a href=\"https:\/\/leafletjs.com\/download.html\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/leafletjs.com\/download.html<\/a>.<\/li>\n\n\n\n<li>Ekstrak leaflet.zip, Klik kanan pilih \u201cExtract to leaflet\\\u201d maka menghasilkan folder \u201cleaflet\u201d, lalu pindahkan folder leaflet ke folder <strong>assets <\/strong>di root CI (jika belum ada, buat dulu folder assets). Jadi struktur foldernya seperti ini: <code>public_html\/assets\/leaflet<\/code><\/li>\n\n\n\n<li>Setelah di ekstrak, buat sebuah <em>controller <\/em>dan beri nama <code>map.php<\/code>.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php if(!defined('BASEPATH')) exit('No direct script access allowed');\n \nclass Map extends CI_Controller{\n    public function index(){\n        $this-&gt;load-&gt;view('map\/index');\n    }\n}<\/code><\/pre>\n\n\n\n<ul start=\"4\" class=\"wp-block-list\">\n<li>Setelah memasukan <em>script <\/em>tersebut, pada base_url() di CodeIgniter 3, pastikan helper url diaktifkan dengan menambahkan &#8216;url&#8217; ke dalam array <code>$autoload['helper']<\/code> di <em>application\/config\/autoload.php<\/em>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$autoload&#091;'helper'] = array('url');<\/code><\/pre>\n\n\n\n<ul start=\"5\" class=\"wp-block-list\">\n<li>Pastikan juga untuk mengatur base_url di <code>application\/config\/config.php<\/code> agar sesuai dengan URL root aplikasi CodeIgniter Anda. Misalnya, jika aplikasi berjalan di hosting, Anda dapat mengaturnya seperti ini:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$config&#091;'base_url'] = 'https:\/\/namadomain';<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Buat folder map pada folder view. Setelah itu, pada folder map kita buat file bernama index.php, sehingga strukturnya menjadi <code>view\/map\/index.php<\/code>.\u00a0<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Masukan <em>script <\/em>berikut pada index.php.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- leaflet map --&gt;\n&lt;link rel=\"stylesheet\" href=\"&lt;?= base_url(); ?&gt;\/assets\/leaflet\/leaflet.css\" \/&gt;\n&lt;script src=\"&lt;?= base_url(); ?&gt;\/assets\/leaflet\/leaflet.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah itu, masukan juga elemen div untuk menampung peta.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style>\n#map { height: 180px; }\n&lt;\/style>\n&lt;div id=\"map\">&lt;\/div><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah semua konfigurasi selesai, selanjutnya inisialisasi peta Leaflet dengan menentukan koordinat awal melalui JavaScript. Berikut adalah contoh sederhana bagaimana melakukannya di file view Anda:\u00a0<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var map = L.map('map').setView(&#091;-7.739677908186675, 110.398694180979599], 13);<\/code><\/pre>\n\n\n\n<p><em>Script <\/em>-7.739677908186675, 110.398694180979599 menunjukan koordinat ketika <em>maps <\/em>pertama kali dibuka.\u00a0Anda dapat menyesuaiikannya, sesuai dengan lokasi maps yang Anda inginkan. Gunakan titik koordinat latitude dan longitude.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah semua disetting. Langkah terakhir adalah memasukan jenis peta yang digunakan.&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    attribution: '&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;OpenStreetMap&lt;\/a&gt; contributors'\n}).addTo(map);\n\nL.marker(&#091;-7.739677908186675, 110.39869418097959]).addTo(map)\n    .bindPopup('A pretty CSS popup.&lt;br&gt; Easily customizable.')\n    .openPopup();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Berikut adalah contoh script lengkapnya:\u00a0<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- leaflet map --&gt;\n&lt;link rel=\"stylesheet\" href=\"&lt;?= base_url(); ?&gt;\/assets\/leaflet\/leaflet.css\" \/&gt;\n&lt;script src=\"&lt;?= base_url(); ?&gt;\/assets\/leaflet\/leaflet.js\"&gt;&lt;\/script&gt;\n \n&lt;style&gt;\n#map {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n#map iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height:100% !important;\n}\n&lt;\/style&gt;\n&lt;div id=\"map\"&gt;&lt;\/div&gt;\n \n&lt;script&gt;\nvar map = L.map('map').setView(&#091;-7.739677908186675, 110.398694180979599], 13);\n\nL.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    attribution: '&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;OpenStreetMap&lt;\/a&gt; contributors'\n}).addTo(map);\n\nL.marker(&#091;-7.739677908186675, 110.39869418097959]).addTo(map)\n    .bindPopup('A pretty CSS popup.&lt;br&gt; Easily customizable.')\n    .openPopup();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Setelah dijalankan, maka akan menampilkan gambar berikut:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"951\" height=\"463\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3.webp\" alt=\"Contoh tampilan maps di CodeIgniter 3 - Cara Membuat Maps di CodeIgniter\" class=\"wp-image-51229\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3.webp 951w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-300x146.webp 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-768x374.webp 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-370x180.webp 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-270x131.webp 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-570x278.webp 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-peta-di-Codeigniter-3-740x360.webp 740w\" sizes=\"auto, (max-width: 951px) 100vw, 951px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Cara Membuat Maps di CodeIgniter 4<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download terlebih dahulu file leafleat <a href=\"https:\/\/leafletjs.com\/download.html\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/leafletjs.com\/download.html<\/a>.<\/li>\n\n\n\n<li>Ekstrak leaflet.zip, Klik kanan pilih \u201cExtract to leaflet\\\u201d maka menghasilkan folder \u201cleaflet\u201d, lalu pindahkan folder leaflet ke folder assets di root CI (jika belum ada, buat dulu folder assets). Jadi struktur foldernya seperti ini: <code>public_html\/public\/leaflet<\/code>.<\/li>\n\n\n\n<li>Setelah di ekstrak, buat sebuah <em>controller <\/em>dan lalu diberi nama map.php.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Controllers;\nclass map extends BaseController\n{\n    public function index(): string\n    {\n        return view('map\/index');\n    }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah membuat control pada bagian config, klik folder routes lalu masukan script berikut:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$routes-&gt;get('\/', 'map::index');<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Buat folder map pada folder view. Setelah itu, pada folder map kita buat file bernama index.php sehingga strukturnya menjadi <code>view\/map\/index.php<\/code>.\u00a0<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Masukan <em>script <\/em>berikut pada index.php<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?= $this-&gt;section('head') ?&gt;\n    &lt;script src=\"&lt;?= base_url('leaflet\/leaflet.js') ?&gt;\"&gt;&lt;\/script&gt;\n    &lt;link rel=\"stylesheet\" href=\"&lt;?= base_url('leaflet\/leaflet.css') ?&gt;\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah itu, masukan juga elemen div untuk menampung peta:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n#map { height: 180px; }\n&lt;\/style&gt;\n&lt;div id=\"map\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah semua konfigurasi selesai, Selanjutnya menginisialisasi peta Leaflet dengan menentukan koordinat awal melalui JavaScript. Berikut adalah contoh sederhana bagaimana melakukannya di file view Anda:&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var map = L.map('map').setView(&#091;-7.739677908186675, 110.398694180979599], 13);<\/code><\/pre>\n\n\n\n<p>Script -7.739677908186675, 110.398694180979599 menunjukan koordinat ketika maps pertama kali dibuka.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setelah semua di setting, langkah terakhir adalah memasukan jenis peta yang digunakan.\u00a0<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    attribution: '&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;OpenStreetMap&lt;\/a&gt; contributors'\n}).addTo(map);\n\nL.marker(&#091;-7.739677908186675, 110.39869418097959]).addTo(map)\n    .bindPopup('A pretty CSS popup.&lt;br&gt; Easily customizable.')\n    .openPopup();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Berikut adalah contoh script lengkapnya:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?= $this-&gt;extend('layout') ?&gt;\n\n&lt;?= $this-&gt;section('head') ?&gt;\n    &lt;script src=\"&lt;?= base_url('leaflet\/leaflet.js') ?&gt;\"&gt;&lt;\/script&gt;\n    &lt;link rel=\"stylesheet\" href=\"&lt;?= base_url('leaflet\/leaflet.css') ?&gt;\" \/&gt;\n \n&lt;style&gt;\n#map {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n#map iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height:100% !important;\n}\n&lt;\/style&gt;\n&lt;div id=\"map\"&gt;&lt;\/div&gt;\n \n&lt;script&gt;\nvar map = L.map('map').setView(&#091;-7.739677908186675, 110.398694180979599], 13);\n\nL.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    attribution: '&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;OpenStreetMap&lt;\/a&gt; contributors'\n}).addTo(map);\n\nL.marker(&#091;-7.739677908186675, 110.39869418097959]).addTo(map)\n    .bindPopup('A pretty CSS popup.&lt;br&gt; Easily customizable.')\n    .openPopup();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Setelah dijalankan, berikut hasilnya:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"503\" height=\"238\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4.webp\" alt=\"Cara Membuat Maps di CodeIgniter 4\" class=\"wp-image-51231\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4.webp 503w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4-300x142.webp 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4-370x175.webp 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/10\/contoh-membuat-maps-di-codeigniter-4-270x128.webp 270w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Sampai tahap ini, proses membuat peta di CodeIgniter telah selesai dan siap digunakan. Dengan adanya peta pada website, diharapkan pengunjung dapat lebih mudah mengetahui lokasi suatu tempat yang ingin mereka kunjungi.<\/p>\n\n\n\n<p>Demikian artikel mengenai cara membuat maps di Codeigniter versi 3 dan 4 menggunakan Leaflet, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah sebelumnya kami membahas tentang cara membuat Maps di Laravel, kali ini kami akan membahas tentang cara membuat maps di CodeIgniter versi 3 dan 4. Simak artikel ini untuk mengetahui langkah-langkahnya! CodeIgniter adalah salah satu framework PHP dengan konsep MVC (Model-View-Controller) yang dapat digunakan untuk membuat website dinamis berbasis PHP. Dengan CodeIgniter, Anda dapat menambahkan [&hellip;]<\/p>\n","protected":false},"author":356,"featured_media":51235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[543,2384,2383],"class_list":{"0":"post-51227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-artikel-tutorial","8":"tag-codeigniter","9":"tag-leaflet","10":"tag-maps"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=51227"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/51235"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=51227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=51227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=51227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}