Dalam sebuah kode pemrograman tidak semua kode dijalankan berurutan, ada saatnya dimana kita membutuhkan suatu kondisi ketika sebuah kode dijalankan. Pada kode pemrograman, struktur kondisi if, else, elseif dan switch adalah hal umum yang biasa kita temukan, begitupun dalam bahasa PHP.
Kondisi dalam bahas pemrograman PHP memungkinkan kita untuk dapat menentukan kode program mana yang dijalankan berdasarkan kondisi tertentu.
Kondisi dalam PHP adalah sebuah mekanisme untuk menentukan alur kerja sebuah kode berdasarkan krteria yang sudah ditentukan, hasil dari kondisi tersebut bernilai true atau false. Berikut ini adalah contoh yang biasa digunakan:
Kondisi if kondisi if akan menjalan kode program jika hasil dari kondisi tersebut bernilai true.
Kondisi if…elseif…else Pada kondisi if elseif dan else, kita dapat menjalankan kode program lebih dari satu pada nilai kondisi true. Biasanya digunakan untuk menangani kondisi yang cukup kompleks.
Kondisi switch Kondisi swicth biasa digunakan untuk membandingkan kondisi yang memiliki banyak nilai, pada beberapa situasi kondisi swicth lebih direkomendasikan dari pada kondisi if dengan alasan kode lebih rapi sehingga mudah untuk di maintenance.
Contoh:
<?php
$hari = "Senin";
switch ($hari) {
case "Senin":
echo "Hari kerja";
break;
case "Sabtu":
case "Minggu":
echo "Hari libur";
break;
default:
echo "Hari tidak dikenal";
}
?>
Kesalahan umum pemula
Keliru saat menggunakan operator pembanding (= vs ==).
Lupa menggunakan break pada saat menggunakan switch.
Kesimpulan
Memahami kondisi di bahasa pemrograman PHP merupakan hal yang sangat penting untuk dapat menguasai bahasa pemrograman ini. Dengan memanfaatkan kondisi, kode program yang kita buat dapat bekerja secara dinamis dan memiliki alur logika program yang baik.
Dalam bahasa pemrograman dengan PHP, operator merupakan simbol khusus yang digunakan untuk melakukan operasi pada satu nilai ataupun lebih. Penggunaan operator menjadi penting karena hampir semua proses logika, perhitungan dan pengambilan keputusan pada PHP menggunakan operator.
Operator Assignment Operator ini digunakan untuk memberikan nilai pada sebuah variable.
Operator
Contoh
=
$a = 5
+=
$a += 5
-=
$a -= 5
*=
$a *= 5
/=
$a /= 5
Operator Perbandingan Operator ini digunakan untuk membangdingkan dua nilai, hasil dari operator ini adalah nilai dengan tipe data boolean yaitu true atau false. Operator ini banyak digunakan untuk pembuatan logika dalam kondisi “if”.
Operator
Fungsi
==
sama dengan
!=
tidak sama dengan
>
lebih dari
<
Kurang dari
>=
lebih dari sama dengan
<=
kurang dari sama dengan
Contoh:
<?php $a = 5; $b = 10;
var_dump($a < $b); // kondisi perbandingan ini akna menghasilkan true ?>
Operator Identitas Sebenarnya operator ini hampir sama dengan operator perbandingan, hanya saja pada operator ini tidak hanya nilai tapi juga membandingkan tipe data.
Operator
Fungsi
===
nilai dan tipe sama dengan
!==
nilai atau tipe tidak sama dengan
Contoh:
<?php var_dump(5 === “5”); // perbandingan ini menghasilkan false, karena 5 pertama adalah tipe data integer sedangkan 5 kedua adalah tipe data string ?>
Operator Logika Operator ini akan digunakan pada kondisi, seperti saat kita ingin membandingkan kondisi A dan kondisi B harus memenuhi kondisi dengan nilai tertentu atau membandingkan salah satu antara kondisi C atau kondisi D memiliki nilai tertentu.
Operator
Fungsi
&&
AND, untuk menggabungkan beberapa kondisi dengan nilai true
||
OR, dianggap benar jika salah satu kondisi memiliki nilai true
Memahami operator PHP merupakan hal yang sangat penting dikeranakan semua operator ini akan kita gunakan dalam penulisan kode nantinya. Dan pada artikel ini kita sudah membahasa beberapa operator yang akan sering kita gunakan pada PHP, untuk lebih lengkapnya sendiri kita bisa coba baca pada dokumentasi resmi milik PHP. Jika sudah memahami operator apa saja yang ada pada PHP, selanjutnya kita akan membahas materi terkait kondisi if dan perulangan.
PHP adalah salah satu bahasa pemrograman yang sangat populer dan banyak digunakan untuk membuat website terutama pada platform seperti wordpress, laravel dan lain sebagainya. Sebelum dapat membuat aplikasi menggunakan PHP, langkah pertama yang harus dilakukan adalah menginstall PHP pada sistem operasi yang digunakan. Pada artikel ini kita akan coba membahas bagaimana cara paling mudah untuk menginstall PHP pada sistem operasi windows dan linux, bahkan untuk pemula sekalipun.
Untuk dapat membuat website yang dinamis, kita perlu bahasa pemrograman yang dapat dijalankan pada sisi server (server-side), karena kebutuhan itulah kita perlu menginstall PHP. Selain menghasilkan website yang dinamis, PHP juga bisa kita manfaatkan untuk mengolah data, membuat koneksi dengan database ataupun terhubung dengan aplikasi lainnya.
Cara install PHP di Windows
Pada sistem operasi windows, installasi PHP menggunakan XAMPP sangat disarankan. Selain karena proses installasi yang mudah, installasi menggunakan XAMPP juga sudah disekaliguskan dengan komponen dan library yang kita butuhkan saat proses pembuatan aplikasi nanti. Untuk langkah-langkah instalasinya kurang lebih seperti ini:
Jalankan Apache melalui XAMPP Control Panel (dengan menekan tombol start pada bagian apache).
Cek instalasi dengan membuka browser dan mengetik http://localhost.
Jika halaman localhost sudah muncul pada browser, maka selamat proses installasi PHP telah berhasil.
Cara install PHP di Linux
Jika menggunakan sistem operasi linux proses install PHP jadi lebih sederhana lagi. Cukup buka terminal dan jalankan perintah berikut ini:
sudo apt update
sudo apt install php
Untuk perintahnya sendiri harus disesuaikan tergantung dengan distro linux yang digunakan.
Tips Optimasi PHP setelah Installasi
Gunakan versi PHP yang terbaru atau yang paling stabil.
Pastikan versi PHP cocok dengan versi framework atau CMS yang hendak digunakan.
Kesimpulan
Install PHP adalah langkah awal dalam proses pembuatan website ataupun aplikasi berbasis web. Proses installasi PHP tergolong cukup mudah baik pada sistem operasi windows maupun linux. Untuk pemula sangat disarankan menggunakan XAMPP dan untuk pengguna sistem operasi linux dapat memanfaatkan package manager untuk proses installasi.
Untuk dapat menguasai PHP, kita perlu juga memahami apa itu tipe data. Hal ini bertujuan agar kita dapat menentukan jenis dari nilai atau data yang kita simpan dalam variabel. Tanpa memahami tipe data, kita tentu akan kesulitan dalam pembuatan logika pada program maupun saat program berinteraksi dengan database. Pada artikel ini kita akan coba membahas apa-apa saja tipe data yang ada pada bahasa pemrogramman PHP beserta contohnya.
Tipe data adalah jenis nilai yang dapat kita simpan dalam sebuah variabel. Dengan PHP, tipe data bisa secara otomatis dikenali berdasarkan nilai yang diberikan, hal ini disebut dengan loosely typed yang artinya dengan PHP kita tidak perlu mendefinisikan type data secara eksplisit.
Jenis-Jenis Tipe Data
Berikut ini adalah beberapa tipe data yang paling sering ditemui pada bahasa pemrogramman PHP:
String, merupakan tipe data untuk menyimpan teks atau karakter.
Contoh: $nama = "Budi";
Integer, merupakan tipe data untuk menyimpan bilangan bulat (baik positif ataupun negatif).
Contoh: $umur = 20;
Float (Double), digunakan untuk menyimpan nilai dengan tipe data angka desimal.
Contoh: $harga = 12.5;
Boolean, tipe data yang satu ini hanya memiliki dua nilai yaitu true atau false. Biasanya digunakan untuk menentukan kondisi pada sebuah logika program.
Contoh: $isLogin = true; $isAdmin = false;
Array, digunakan untuk menyimpan banyak nilai pada suatu variabel.
Contoh: $buah = ["Apel", "Jeruk", "Mangga"];
Object, merupakan tipe data yang diperoleh dari suatu class. Biasanya digunakan saat kita mengimplementasikan pemrogramman berbasis objek (OOP).
Contoh: class User { public $nama; } $user = new User(); $user->nama = "Andi";
NULL, tipe data ini digunakan untuk menentukan bahwa suatu variabel tidak memiliki nilai.
Contoh: $data = null;
Mengecek Tipe Data
PHP menyediakan sebuah fungsi bawaan yaitu var_dump() yang bisa digunakan untuk mengecek nilai ataupun tipe data dari suatu nilai variabel.
Contoh: $angka = 10; var_dump($angka);
Kesimpulan
Dengan memahami tipe data yang ada seperti string, integer, float, boolean, array, object dan null, kita dapat menulis sebuah kode program dengan lebih baik. Bagi pemula, memahami konsep ini adalah hal yang sangat penting sebelum mempelajari materi lanjutan seperti membuat perulangan dan fungsi dengan PHP.
Dalam dunia pemrograman, variabel adalah salah satu dasar yang wajib untuk dipahami. Dalam PHP, variabel bisa kita gunakan untuk menyimpan suatu nilai, mengolah ataupun menampilkannya pada pengguna. Pada artikel kali ini, kita akan membahas mengenai variabel pada bahasa pemrogramman PHP mulai dari pengertian, penulisan hingga contoh penggunaannya.
Variabel pada PHP adalah sebuah tempat atau wadah untuk menyimpan suatu nilai. Nilai tersebut bisa berupa huruf, angka ataupun jenis data lainnya (hal ini berkaitan dengan type data, type data akan kita coba bahas pada artikel berikut ini). Pada PHP, setiap variabel diawali dengan simbol $. Berikut ini adalah contoh pembuatan variabel:
<?php
$nama = "Budi";
$umur = 25;
?>
Aturan penulisan variabel
Ada beberapa aturan penulisan yang perlu diperhatikan. Antara lain:
Variabel harus diawali dengan simbol $.
Nama variabel harus berawalan huruf atau underscore.
Nama variabel tidak boleh dimulai dengan angka.
Nama variabel bersifar case-sensitive (artinya besar dan kecil huruf berpengaruh).
Contoh:
<?php
$nama = "Andi";
$Nama = "Budi"; // berbeda dengan $nama
?>
Variabel bawaan (superglobal variable)
PHP memiliki beberapa variabel bawaan atau yang biasa disebut superglobal variables. Variabel ini ada dimanapun dan bisa dipanggil dengan menggunakan simbol $_. Berikut ini adalah beberapa superglobal varibles dan penjelasannya:
$_GET digunakan untuk mengambil nilai dari url (query string).
$_POST digunakan untuk mengambil nilai dari form submission HTML menggunakan method POST.
$_SESSION digunakan untuk mengambil data sementara milik sesi user yang sedang aktif.
$_COOKIE digunakan untuk menyimpan data dibrowser pengguna.
Penggunaan variabel
Untuk menampilkan nilai dari variabel, kita bisa menggunakan perintah echo.
Untuk menggabungkan variabel dengan teks ataupun dengan variabel lainnya yang memiliki type data string, kita bisa menggunakan simbol .
<?php
$nama = "Rudi";
echo "Halo, nama saya " . $nama;
// output: Halo, nama saya Rudi
?>
Kesalahan umum penggunaan
Pada penggunaan variabel khususnya bagi pemula, sering ditemukan beberapa kesalahan yang mengakibatkan kesalaha pada kode program. Berikut ini kita coba contohkan beberapa kesalahan yang biasa dilakukan:
Lupa menambahkan simbol $.
Salah menuliskan huruf besar dan kecil (ini karena sifat case-sensitive pada PHP).
Menggunakan spasi pada nama variabel.
Kesimpulan
Memahami variabel PHP adalah dasar yang sangat penting untuk dapat menguasai bahasa pemrograman PHP. Dengan memahami bagaimana cara variabel disimpan, diolah ataupun ditampilkan, kita sudah memiliki dasar yang cukup untuk mempelajari bagain selanjutnya seperti membuat perulangan, mendeklarasikan kondisi (if statement) ataupun membuat fungsi pada PHP.
Beberapa hari ini, developer khususnya yang menggunakan reactjs dihebohkan oleh penemuan celah securityCVE-2025-55182. Celah keamanan ini masuk pada kategori high severity karena dapat menyebabkan kebocoran data serta manupilasi behaviour pada komponen tertentu. Artikel ini akan mencoba membahas bagaimana celah keamanan CVE-2025-55182 dapat mempengaruhi aplikasi berbasis reactJs serta apa langkah mitigasi yang direkomendasikan.
CVE-2025-55182 adalah celah keamanan pada react server component. Celah keamanan pada reactjs ini memungkinkan dilakukannya Remote Code Execution (RCE), hal ini menyebabkan penyerang atau hacker untuk mengeksekusi kode dari sisi server tanpa memerlukan autentikasi. Karena dampaknya yang sangat buruk, celah keamanan reactjs ini bahkan sampai mendapatkan nilai maksimal: CVSS 10.0 (High Severity).
CVE-2025-55182 atau React2Shell merupakan celah keamanan pada ReactJS yang berbahaya dan harus segera ditangani. Banyak developer mungkin tidak sadar aplikasi yang mereka kembangkan rentan terhadap celah ini, dikarenakan depedensi RSC ini sering terpasang secara tidak langsung melalui framework atau library lainnya.
Menampilkan Map Pada Web – Kali ini kita akan membahas bagaimana cara menampilkan map pada web menggunakan google maps. Untuk dapat menampilkan map pada webite, kita akan bagi menjadi dua cara, yang pertama adalah menggunakan tag iframe (cara ini hanya mampu menampilkan map saja tanpa ada fitur tambahan), cara kedua adalah dengan memanfaatkan API dari google maps itu sendiri (dengan cara ini kita bukan hanya akan menampilkan tapi juga kita akan menambahkan beberapa fitur seperti on click event dan kotak pencarian).
Goals – Menampilkan Map Pada Aplikasi Website Kita Sendiri
Seperti yang sudah dibahas diatas, kita akan mencoba menampilkan map dengan dua cara, yang mana bisa disesuaikan dengan kebutuhan kita masing-masing. Khusus untuk cara kedua (yang menggunakan API) kita diharuskan memiliki key terlebih dahulu, silahkan ambil key-nya dari sini (https://developers.google.com/maps/documentation/javascript/get-api-key). Berikut ini adalah contoh dari google map yang berhasil kita tampilkan pada halaman website kita sendiri :
Cara pertama, menggunakan tag iframeCara kedua menggunakan API
Materi
1. Menggunakan tag iframe
Pertama kita akan membahas bagaimana menampilkan google maps dengan menggunakan tag iframe, apa itu iframe? Iframe itu sendiri adalah sebuah tag elemen dari HTML yang memungkinkan kita untuk men-embed media dari suatu halaman. Untuk menggunakannya dengan google maps, silahkan copy code dibawah ini :
<h1>Membuat Google Maps dengan tag iframe</h1>
<iframe width="100%" height="300" frameborder="10" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?q=-6.175307,106.827131&hl=es;z=14&output=embed"></iframe>
Untuk menyesuaikan daerah mana yang ingin ditampilkan pada halaman web, kita tinggal menyesuaikan kordinat yang kita dapat dari google maps kedalam parameter q (contoh : ?q=-6.175307,106.827131). Jadi untuk mengganti tampilan map kedaerah yang lain kita hanya tinggal merubah kordinat yang ada pada parameter q tersebut.
2. Menggunakan API
Untuk menggunakan cara kedua ini, pastikan anda sudah memiliki key yang diperoleh dari website resmi google. Untuk cara yang kedua ini agak rumit karena kita juga akan menggunakan sedikit javascript. Pertama copy code dibawah ini :
<h1>Membuat Google Maps dengan API</h1>
<input id="search-input" class="controls" type="text" placeholder="Cari...">
<div id="googleMap" style="width:100%;height:300px;"></div>
<div id="address"></div>
<div id="latitude"></div>
<div id="longitude"></div>
Dan berikutnya copy javascript dibawah ini :
var marker;
var map;
var geocoder;
var infowindow;
var searchBox;
function gMap() {
var mapProp= {
center:new google.maps.LatLng(-6.175307,106.827131),
zoom:15,
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
geoDecode();
});
searchBox = new google.maps.places.SearchBox(document.getElementById('search-input'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('search-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),15));
geoDecode();
});
}
function placeMarker(location) {
if (marker == null) {
marker = new google.maps.Marker({
position: location,
map: map
});
} else {
marker.setPosition(location);
}
}
function geoDecode(){
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
}
Sedikit penjelasan, fungsi gMap akan kita gunakan sebagai callback agar fungsinya dapat dijalankan oleh API google maps. Didalam fungsi gMap kita akan mendeklarasikan object google (new google.maps) dan menambahkan 2 event yaitu on click event (google.maps.event.addListener(map, ‘click’, function(event)) dan event untuk kotak pencarian (google.maps.event.addListener(searchBox, ‘places_changed’, function()). Selain itu kita juga memiliki fungsi placeMarker yang akan kita gunakan untuk melakukan pin point atau menempatkan titik pada map, dan fungsi geoDecode yang kita gunakan untuk memperoleh informasi wilayah dari titik yang kita tempatkan pada google maps.
Berikut ini adalah contoh full source code nya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google Maps</title>
</head>
<body>
<h1>Membuat Google Maps dengan tag iframe</h1>
<iframe width="100%" height="300" frameborder="10" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?q=-6.175307,106.827131&hl=es;z=14&output=embed"></iframe>
</br>
<h1>Membuat Google Maps dengan API</h1>
<input id="search-input" class="controls" type="text" placeholder="Cari...">
<div id="googleMap" style="width:100%;height:300px;"></div>
<div id="address"></div>
<div id="latitude"></div>
<div id="longitude"></div>
<script>
var marker;
var map;
var geocoder;
var infowindow;
var searchBox;
function gMap() {
var mapProp= {
center:new google.maps.LatLng(-6.175307,106.827131),
zoom:15,
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
geoDecode();
});
searchBox = new google.maps.places.SearchBox(document.getElementById('search-input'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('search-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),15));
geoDecode();
});
}
function placeMarker(location) {
if (marker == null) {
marker = new google.maps.Marker({
position: location,
map: map
});
} else {
marker.setPosition(location);
}
}
function geoDecode(){
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=gMap&libraries=places"></script>
</body>
Penutup
Demikianlah beberapa cara untuk menampilkan map pada website kita sendiri menggunakan google maps, hal-hal diatas bersifat dasar dan umum, untuk lebih jelasnya bisa langsung saja dibaca pada dokumentasi resmi milik google, terima kasih.
Kali ini saya akan membahas beberapa library javascript terbaik versi saya, artikel ini ditujukan bagi teman-teman developer pemula (seperti saya) yang baru mulai atau sedang mempelajari bahasa pemrograman javascript. Saya katakan terbaik karena hampir disetiap project yang saya kerjakan saya menggunakan library-library ini. Selain karena mudahnya penggunaan, lengkapnya dokumentasi, kemudahan saat kita hendak men-custom dan juga lisensi yang open source membuat saya hampir selalu menggunakan library-library javascript ini. Dan berikut ini adalah list dari library javascript terbaik menurut saya.
Berikut ini adalah daftar library javascript terbaik menurut saya, yang mungkin belum anda ketahui :
1. CKEditor
CKEditor
Jika anda membutuhkan sebuah text editor yang mendukung penggunaan rich text format RTF, maka library javascript yang satu ini bisa anda coba. Namanya adalah CKEditor, mengacu pada informasi di website resminya CKEditor sendiri pertama kali dibuat tahun 2003 oleh Frederico Knabben dan timnya, hingga sekarang masih terus dikembangkan dan memiliki 2 mayor version yaitu CKEditor 4 dan 5. Jika tertarik anda bisa langsung mengunjungi dokumentasi resminya di (https://ckeditor.com/docs/ckeditor4/latest/).
2. canvasJS
canvasJS
Anda ingin membuat sebuah tampilan dashboard yang menampilkan beberapa grafik chart sebagai re-presentasi data? canvasJS bisa menjadi solusi yang sangat membantu untuk anda. Library buatan Fenopix ini (sebuah perusahaan yang menfokuskan diri pada bidang visualisasi data), sudah mulai dirilis dari tahun 2013 dan terus dikembangkan hingga saat ini. Selain karena implementasi yang mudah dan dokumentasi yang lengkap, Fenopix selaku pengembang juga meng-klaim mudahnya integrasi dengan beberapa popular front end frameworks, jika tertarik silahkan kunjungi dokumentasi resminya di (https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/).
3. DataTables
DataTables
Berikutnya ada DataTables, library buatan Allan Jardine (https://sprymedia.co.uk/index) ini pertama kali dirilis tahun 2007 dan masih dikembangkan hingga saat ini. Library javascript ini akan membantu kita dalam pengolahan data berbentuk table dari sisi front end. Library ini dapat secara otomatis membuatkan pagination, kolom pencarian, sorting per-kolom dan lain-lain. Jika anda tertarik bisa langsung dipelajari saja di dokumentasi resminya (https://datatables.net/examples/index).
4. Select2
Select2
Library javascript buatan Kevin Brown ini (https://kevin-brown.com/), dapat digunakan untuk me-manipulasi tag html select konvensional dengan bentuk yang lebih modern dan menarik untuk dilihat oleh user. Bukan hanya saja menambahkan sebuah kolom pencarian yang akan memudahkan user, library ini juga memungkinkan kita untuk membuat sebuah list option dengan multiple choices. Jika tertarik menggunakan library javascript ini bisa langsung dipelajari di dokumentasi resminya (https://select2.org/).
5. MomentJS
Anda pernah menggunakan Carbon pada PHP untuk memanipulasi waktu? Jika anda membutuhkan library dengan fungsi serupa namun dengan bahasa pemrograman javascript maka momentJS adalah jawabannya. Library javascript yang satu ini mulai dikembangkan dari tahun 2011 dan sampai saat ini masih terus mendapatkan update (informasi ini saya dapat dari repository code nya di github). Penggunaannya yang mudah dan dokumentasi-nya yang lengkap membuatnya menjadi salah satu library javascript yang selalu saya gunakan pada project yang saya kembangkan. Silahkan pelajari dokumentasi resminya di (https://momentjs.com/).
Penutup
Demikianlah informasi yang saya hendak bagikan kali ini. Mungkin saja list ini akan terus saya update jika saya menemukan adanya library javascript lainnya yang saya rasa bisa dijadikan opsi saat kita sedang mengembangkan project program berbasis web, karena seiring dengan terus berkembangnya bahasa yang satu ini, saya cukup yakin kalau library-library keren seperti yang sudah kita bahas diatas akan terus bermunculan. Terima kasih.
Fitur Rahasia Laravel – Pada kesempatan ini kita akan membahas fitur rahasia pada framework laravel, saya mengatakan fitur rahasia karena hal-hal yang akan saya jabar-kan dibawah ini tidak bisa kita temukan di dokumentasi resminya (https://laravel.com/docs/7.x). Saya sendiri menemukan beberapa fitur ini kebanyakan berdasarkan referensi yang saya baca dari internet, ada cukup banyak kalau kita mau riset. Namun kali ini saya akan coba jabar-kan beberapa fitur rahasia laravel yang sering saya gunakan pada project yang sedang saya kembangkan.
Sebagian dari kita pasti tidak asing dengan method find() atau findOrFail(), namun tahukan anda kita dapat mendefinisikan attribute tertentu saat menggunakan method ini? Contohnya seperti dibawah ini :
Jika hanya hendak memeriksa model atau attribute sudah diubah atau belum bisa menggunakan method isDirty(), contohnya seperti ini :
$barangs = model::where('id',$id)->first();
$barangs->isDirty(); // false
$barangs->nama_barang = $request->nama_barang;
$barangs->jumlah_barang = $request->jumlah_barang;
$barangs->keterangan = $request->keterangan;
$barangs->isDirty(); // true
$barangs->save();
// Atau bisa juga dengan specific attribute
$barangs->isDirty('nama_barang'); // true
$barangs->isDirty('jumlah_barang'); // false
5. Mendapatkan nilai attribute asli yang sudah diubah
Selain bisa mendapatkan dan memeriksa perubahan pada suatu attribute, kita juga bisa mendapatkan kembali nilai asli dari suatu attribute yang sudah kita ubah sebelumnya, contohnya seperti ini :
6. Model relationship dengan where dan order by statement
Tahukah anda kita bisa menyisipkan beberapa where dan order by statement pada model relasi yang kita buat? Contoh nya seperti dibawah ini :
public function getUpdatedBy(){
return $this->hasOne(User::class, 'id', 'updated_by')->where('role','admin')->orderBy('email');
}
7. Multiple id parameter pada find() method
Kembali lagi pada find() method, kali ini kita juga bisa mendefinisikan beberapa parameter id sekaligus, contohnya seperti ini :
$barangs = model::find([2,4,6]);
8. Order by data pada relationship
Untuk fitur yang satu ini, kita akan mencoba mengurutkan data berdasarkan model relationship, biasanya konsep ini kita perlukan untuk menampilkan data topik pada suatu blog atau forum berdasarkan post terakhir, contohnya seperti dibawah ini :
// di model tambahkan method latest()
return $this->hasOne(User::class, 'id', 'updated_by')->latest();
// di controller tambahkan method sortByDesc
$barangs = model::with('getUpdatedBy')->get()->sortByDesc('getUpdatedBy.created_at');
9. Multiple where condition
Jika biasanya kita mendefinisikan kondisi where satu persatu, sebetulnya kita bisa mendefinisikan kondisi tersebut sekaligus dalam satu where statement, contohnya seperti ini :
Demikianlah penjabaran fitur-fitur laravel yang saya rasa akan berguna bila kita ketahui, mungkin artikel ini akan terus diupdate point-point nya seiring dengan ditemukannya fitur-fitur menarik lainnya pada laravel, terima kasih.
Aplikasi CRUD Android MySql – Kali ini kita akan membahas bagaimana pembuatan CRUD pada aplikasi berbasis android dengan menggunakan database mysql, kita juga akan memanfaatkan retrofit sebagai rest api client dan laravel sebagai platform web service. Tanpa berbasa-basi lagi, langsung saja kita masuk pada pembahasan bagaimana cara membuat aplikasi crud android menggunakan mysql sebagai database.
Goals – Mampu membuat operasi CRUD pada aplikasi berbasis android
Diharapkan kita mampu membuat operasi crud pada aplikasi android, dengan memanfaatkan library retrofit dan frame work php yaitu laravel. Untuk metode read data dalam bentuk list sudah pernah dibahas pada artikel ini (https://softgain-technology.com/2020/06/23/contoh-sederhana-recyclerview-cardview-dengan-implementasi-retrofit/) dan diharapkan untuk membaca artikel sebelumnya yang membahas pembuatan list data karena artikel ini merupakan kelanjutannya, kali ini kita akan melanjutkan pembuatan pada bagian create, update dan delete data.
Materi
Pertama-tama kita akan menambahkan end point api kita pada file Interface.java, buka file tersebut dan tambahkan code dibawah ini :
Sedikit penjelasan, kita menambahkan beberapa end point dengan metode request yang berbeda-beda, kita mendeklarasikan suatu metode pada end point dengan menggunakan annotation @ (contoh @PUT, berarti kita menggunakan metode PUT untuk end point yang satu ini). Berikutnya didalam end point kita juga men-deklarasi-kan ke-url mana end point ini kita tujukan (contoh barang/store, berarti yang akan kita hit adalah end point http://root/barang/store, dimana http://root kita definisikan dari file Client.java). Next, setelahnya kita memanggil model yang akan menjadi re-presentasi response yang akan diterima oleh aplikasi kita (contoh Call<GetResponseSuccess>, didalam class GetResponseSuccess telah terisi attribute, object dan serialisasi data yang sesuai dengan response yang kita terima). Barulah kita membuat suatu interface baru yang didalamnya bisa kita sisipkan parameter-parameter yang hendak kita sertakan saat end point api kita hit (contoh postBarangDelete adalah nama service atau interface dan didalamnya kita sertakan attribute parameter seperti @Header, @Path, @Field dan lain-lain).
Berikutnya buatlah 3 class baru dalam model, class GetReponseSuccess, class SingleDataSuccess dan class SingleDataBarang.
Class GetReponseSuccess akan digunakan berkali-kali untuk men-handle response standar ketika kita sukses melakukan operasi PUT, POST dan DELETE. Isi class-nya kurang lebih seperti ini :
package com.soft_gain.myinventory.Model;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class GetReponseSuccess {
@SerializedName("success")
@Expose
private Boolean success;
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
}
Untuk class SingleDataBarang akan berisi object dari class SingleDataSuccess, dimana isi dari class SingleDataSuccess adalah attribute yang sudah di serialisasi dari class Datum.java (hal ini dilakukan karena response yang kita terima saat hendak melakukan edit data memiliki struktur object didalam object, sehingga mengharuskan kita untuk membuat beberapa model agar kita dapat men-serialisasi-kan object yang hendak kita pakai). Isi dari class SingleDataBarang dan class SingleDataSuccess masing-masing seperti ini :
package com.soft_gain.myinventory.Model.Barang;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class SingleDataSuccess {
@SerializedName("data")
@Expose
private Datum data;
public Datum getData() {
return data;
}
public void setData(Datum data) {
this.data = data;
}
}
package com.soft_gain.myinventory.Model.Barang;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class SingleDataBarang {
@SerializedName("success")
@Expose
private SingleDataSuccess success;
public SingleDataSuccess getSuccess() {
return success;
}
public void SingleDataSuccess(SingleDataSuccess success) {
this.success = success;
}
}
Create atau Insert Data
Pertama buatlah sebuah layout baru, layout ini akan kita jadikan sebagai top menu yang berisi button “tambah data” saat kita membuka list view, silahkan beri nama top_menu_fragment_list.xml, isinya kurang lebih seperti ini :
Untuk asset @drawable/ic_add sendiri, silahkan klik kanan pada bagian drawable dan ikuti petunjuk dibawah ini :
Contoh Add Image Drawable 1.1
Lalu isikan seperti dibawah ini (silahkan sesuaikan nama dan gambar yang hendak dipakai sebagai asset) :
Contoh Add Image Drawable 1.2
Berikutnya kita akan modifikasi sedikit class MainActivity, ubah pada metode onOptionsItemSelected menjadi seperti dibawah ini :
public boolean onOptionsItemSelected(MenuItem item) {
Fragment fragment = null;
int id = item.getItemId();
if (id == R.id.action_logout) {
logout();
return true;
}else if (id == R.id.action_add) {
fragment = new BarangFragmentFormAdd();
if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();
} else {
/*Log.e("log softgain : ", "Error in creating fragment");*/
}
return true;
}
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
Yang perlu diperhatikan diatas adalah penambahan statement else if (id == R.id.action_add), dimana id action_add adalah id pada layout yang sudah kita tambahkan sebelumnya, dan jika statement terpenuhi atau sama dengan true maka kita akan menjalankan sebuah fragment baru (ada pada baris ini new BarangFragmentFormAdd()), yang mana fragment inilah yang memiliki fungsi untuk menampilkan form tambah data.
Berikutnya kita akan menambahkan sebuah class baru BarangFragmentFormAdd, didalam class ini kita akan mendefinisikan metode penyimpanan data kedalam database. Isi class BarangFragmentFormAdd seperti ini :
Yang perlu dipahami adalah, pada metode onClick kita telah menjalankan end point api yang sudah kita buat sebelumnya yaitu postBarangStore, berikut juga kita definisikan semua parameter yang diperlukan oleh end point api tersebut (pada bagian ini Call<GetReponseSuccess> call = service.postBarangStore(“Bearer “+token, nama_barang.getText().toString(), jumlah_barang.getText().toString(), keterangan.getText().toString());), perlu diingat untuk urutan parameter yang hendak kita kirim jangan sampai salah karena akan mempengaruhi proses yang terjadi disisi server. Lalu jika proses simpan data berhasil (statement ini response.isSuccessful()), tampilan akan kita kembalikan pada bagian list data (ada pada bagian ini new BarangFragmentList()).
Berikutnya kita akan buat sebuah layout baru dengan nama fragment_barang_form.xml, layout inilah yang akan menjadi interface dari form yang akan kita gunakan. Isi dari file fragment_barang_form seperti ini :
Terakhir tambahkan sebuah file pada drawable asset dengan nama rounded_edittext.xml yang akan kita gunakan sebagai design template dari editText yang kita gunakan pada form isi-an. Isi dari file rounded_edittext seperti ini :
Pada tampilan list data, terdapat dua buah button berbentuk pensil dan tempat sampah, ketika user men-klik button pensil kita hendak memanggil single data dan kita tampilkan pada form agar user dapat melakukan perubahan pada data tersebut.
Pertama kita akan melakukan sedikit modifikasi pada class BarangAdapter, kita akan melakukan perubahan pada metode onBindViewHolder. Silahkan ubah bagian onBindViewHolder menjadi seperti dibawah ini :
Kita akan memberikan event on click pada button edit yang kita definisi-kan sebagai holder.edit, didalamnya kita akan menyimpan id yang akan menjadi acuan data mana yang akan diubah (kita definisi-kan sebagai idData). Id tadi akan kita simpan ke dalam shared preferences (dibagian ini editor.putString(“editedIdBarang”, idData)), lalu kita akan membuka sebuah fragment baru yaitu BarangFragmentFormEdit (anyway, jika pembaca ada yang memiliki metode pemindahan id dari satu fragment ke fragment lainnya dengan cara yang lebih efisien silahkan disampaikan pada kolom komentar).
Lalu kita akan membuat sebuah class baru dengan nama BarangFragmentFormEdit, isi dari class BarangFragmentFormEdit kurang lebih seperti ini :
Untuk proses pembacaan data, kita akan fokus pada metode onCreateView dibagian Call<SingleDataBarang> call = service.postBarangEdit(“Bearer “+token, editedIdBarang), dibagian ini kita akan menggunakan end point api kita untuk memanggil data yang hendak kita modifikasi. Jika berhasil, maka data yang kita terima akan kita masukan pada editText untuk ditampilkan pada user :
Dan kita masih akan menggunakan layout fragment_barang_formsebagai interface form isi-an.
Update data
Untuk proses update data, kita masih akan melakukannya pada class BarangFragmentFormEdit, untuk update data itu sendiri kita akan melakukannya pada on click event dari button dengan id submit. Untuk detailnya ada pada bagian ini :
Pada bagian ini hampir mirip dengan fungsi untuk menyimpan data, hanya saja kali ini end point api yang kita hit adalah postBarangUpdate.
Delete data
Untuk proses hapus data, kita akan kembali ke class BarangAdapter. Jika untuk edit data kita menggunakan holder.edit, maka untuk hapus data kita akan gunakan holder.delete :
Didalamnya, kita akan memanggil metode baru yaitu showDialog, metode ini adalah metode sederhana untuk memunculkan popup dialog yes/no yang akan kita manfaatkan untuk men-konfirmasi user jika hendak men-hapus data. Detail metode-nya seperti ini :
public void showDialog(final String title, final String id) throws Exception {
AlertDialog.Builder builder = new AlertDialog.Builder(context);
builder.setMessage("Hapus : " + title + "?");
builder.setPositiveButton("Ya", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int which){
dialog.dismiss();
progressDoalog = new ProgressDialog(context);
progressDoalog.setMessage("Loading....");
progressDoalog.show();
myPrefs = context.getSharedPreferences("sg_shared_pref", context.MODE_PRIVATE);
String token = myPrefs.getString("token", "");
Interface service = Client.getClient().create(Interface.class);
Call<GetReponseSuccess> call = service.postBarangDelete("Bearer "+token, id);
call.enqueue(new Callback<GetReponseSuccess>() {
@Override
public void onResponse(Call<GetReponseSuccess> call, Response<GetReponseSuccess> response) {
if(response.isSuccessful()){
progressDoalog.dismiss();
Toast.makeText(context, "Hapus data berhasil!", Toast.LENGTH_SHORT).show();
BarangFragmentList nextFrag= new BarangFragmentList();
((MainActivity)context).getSupportFragmentManager().beginTransaction()
.replace(R.id.content_frame, nextFrag, "findThisFragment")
.addToBackStack(null)
.commit();
}else{
/*Log.v("log softgain : ", String.valueOf(response.errorBody()));*/
progressDoalog.dismiss();
Toast.makeText(context ,"Hapus data gagal!",Toast.LENGTH_SHORT).show();
}
}
@Override
public void onFailure(Call<GetReponseSuccess> call, Throwable t) {
/*Log.v("log softgain : ", String.valueOf(t));*/
progressDoalog.dismiss();
Toast.makeText(context, "Something went wrong...Please try later!", Toast.LENGTH_SHORT).show();
}
});
}
});
builder.setNegativeButton("Tidak", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int which){
dialog.dismiss();
}
});
builder.show();
}
Jika user memilih yes, maka kita akan menjalankan end point api postBarangDelete agar data yang dimaksud dapat dihapus dari database.
Penutup
Demikian lah proses pembuatan CRUD pada aplikasi berbasis android menggunakan mysql sebagai database, retrofit sebagai rest api client dan frame work laravel sebagai platform serb service. Menurut saya pemahaman tentang crud ini sendiri sangatlah penting, karena memang ini adalah dasar dan modal dari semua aplikasi yang akan kita buat di-kemudian hari. Semoga bermanfaat dan mohon maaf apabila terdapat kekeliruan penjelasan pada artikel ini, silahkan ambil full source-nya pada repo ini (https://github.com/ImmanuelJL/myinventory.git), terima kasih.