Aug 14, 2020

logoblog

Tutorial Simple Bootstrap 4 Responsive Form

Sumber : https://dev.to

 

Hallo sobat berjumpa lagi dengan blogcahti. Setelah sekian lama sibuk menggarap tugas akhir, kali ini saya akan berbagi tutorial bootstrap. Membuat form yang responsive menggunakan bootstrap 4 benar-benar simple. Mengkombinasikan class .col dan membuat center class .row agar tampilan menjadi keren. 

 

Singkat saja karena tutorial ini sangat mudah, namun dibagian akhir akan saja jelaskan agar kalian paham dan bisa dengan mudah membuat yang lebih keren.

 

Buat file bootstrap-form.html lalu copy paste kode berikut ini : Pada kode tersebut pertama didalam tag <head> kita mengambil source bootstrap 4 supaya dapat terhubung ke bootstrap :

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Kalian butuh akses internet pastinya, jika tidak kamu bisa download terlebih dahulu di getbootstrap.com lalu menggunakan eksternal link folder dimana kalain menyimpan file bootstrap.

 

Terdapat banyak class namun saya hanya akan membahasnya sedikit saja. Pada class .justify-content-center berfungsi untuk centering dan harus berada pada class .row. Kemudian class .col akan membuat element lebih lega karena didalamnya sudah include width, padding, dll. Pada class .content saya membuat sedikit custom css untuk menambah margin dan perubahan pada selector tag <input>.

 

Silakan buka browser kemudian masukan url dimana kalian menyimpan file tersebut. Ya, memang terlihat begitu keren dan mudah dipelajari.

Sekian tutorial tentang Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10. Jika ada yang ingin ditanyakan, silahkan berkomentar. 

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Jun 8, 2020

logoblog

Membuat Alert Dialog Javascript untuk Confirm Delete Database CodeIgniter 4

Confirm Dialog Box

Alert Dialog Javascript untuk Confirm Delete Database - Pada tutorial kali ini akan sedikit simple yaitu menambahkan javascript sebagai alert dialog. Ketika kita ingin menghapus database pastinya membutuhkan konfirmasi penghapusan. Tujuannya adalah supaya kita benar-benar yakin dengan mengkonfirmasi ulang database apa yang akan dihapus.

Pada CodeIgniter, dengan menggunakan base_url() maka files javascript akan dieksekusi di direktori VIEW yang merupakan client-side. Kamu tidak bisa menulis javascript pada server-side. Intinya kamu tidak bisa mencampur adukan kedua hal tersebut karena hal tersebut berbeda.

1. Tambahkan script berikut didalam file php pada direktori VIEW
<script type="text/javascript" src="<?=base_url()?>js/jquery.js" ></script>
<script type="text/javascript" src="<?=base_url()?>js/ajax.js" ></script>

2. Lalu tambahkan script ini didalam file php pada Controller 
$this->load->helper('url');

3. Kembali ke direktori VIEW, pada file tambahkan
<script type="text/javascript">
    function confirmDelete() {
        return confirm('Are you sure want to delete this record?');
    }
</script>

4. Terakhir, perhatikan letak tombol atau link delete. Tambahkan script berikut didalam tag html
onclick="return confirmDelete();"

Sebagai contoh :
 <a href="/bengkel/delete/<?= $row['idBengkel'];?>" onclick="return confirmDelete();">Delete</a>


Sekian tutorial tentang Membuat Alert Dialog Javascript untuk Confirm Delete Database CodeIgniter 4. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Jun 7, 2020

logoblog

Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10

Install Composer

Cara Install Codeigniter Menggunakan Composer - Secara singkat CodeIgniter merupakan Framework PHP untuk membangun aplikasi web. CodeIgniter terdiri dari beberapa versi antara lain CodeIgniter 1, CodeIgniter 2, CodeIgniter 3 dan terakhir yaitu CodeIgniter 4. Tutorial kali ini hanya membahas cara install CodeIgniter 4 di Windows 10.

Saat ini CodeIgniter mengalami perubahan yang cukup besar setelah CI 4 muncul. Mau tidak mau kita harus membaca dokumen yang tersedia di situs resmi CodeIgniter agar bisa mengetahui apa saja yang diperbarui.

Agar CodeIgniter bisa berjalan web server dalam bahasan ini yaitu XAMPP server, kita harus mengaktifkan intl extention, php-json, php-mbstring, php-mysqlnd, dan php-xml. Kamu bisa mengeceknya di file php.ini.

Selain itu juga membutuhkan PHP 7.2+. Untuk mengecek versi php kamu bisa ketik perintah php -v. Demi alasan keamaan, CodeIgniter 4 juga memindahkan file index.php ke folder /public yang sebelumnya berada di root project.

Langkah Install CodeIgniter 4 menggunakan Composer

Dengan menggunakan Composer proses instalasi lebih mudah dan efisien. Hal pertama yang harus diperhatikan adalah mengaktifkan script di file php.ini seperti yang sudah saya jelaskan sebelumnya, terutama file intl extention. Pada PHP versi 7.2 atau terbaru, nama file tersebut yaitu extension=intl. Kamu bisa mencarinya menggunakan fitur pencarian, untuk mengaktifkannya cukup hapus ";" yang berada didepannya.

1. Masuk ke direktori root web server. Misal disini saya menginstall xampp di D:\xampp\htdocs
2. Ketik perintah composer create-project codeigniter4/appstarter nama_project_ci
Create Project

3. Masuk ke folder project yang sudah dibuat di D:\xampp\htdocs\nama_project_ci
4. Ketik perintah composer update
Composer Update

5. Terakhir cek apakah sudah berhasil dengan perintah php spark serve
Php Spark Serve

Jika berhasil, buka browser ketik http://localhost:8080 di address bar
Welcome to CodeIgniter

Sekian tutorial tentang Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.
logoblog

Cara Mudah Install dan Menjalankan Composer di Windows 10

Install Composer (Sumber : getcomposer.org)

Cara Mudah Install Composer - Hai sobat blogcati berjumpa lagi dengan saya. Kali ini saya akan memberikan tutorial instal composer dan juga menjalankannya di windows 10. Bagi teman-teman yang belum tau apa itu composer, akan saya rangkum sesingkat mungkin dalam tulisan ini.

Apa itu Composer

Composer adalah sebuah tool untuk manajemen depedency didalam pemrogaman PHP yang memudahkan kita dalam mendeklarasikan library sebagai wadah untuk mengelola bahkan memperbaruinya. Composer mengelola berdasarkan per project yang kemudian diinstal didalam direktori tertentu. Composer terinspirasi oleh node npm dan Ruby. Dengan menggunakan composer, kamu dapat mencari tahu paket yang bisa dan perlu diinstal didalam project. Kamu juga dapat memperbarui semua depedencies dalam satu perintah. Mungkin cukup membingungkan bagi yang baru ingin memasang tool ini.

System Requirements

Ada beberapa hal yang harus diperhatikan untuk menjalankan Composer, antara lain :
  • Composer memerlukan PHP 5.3.2+
  • Beberapa setting PHP sensitif dan compile flag diperlukan
  • Multi-platform, dapat digunakan di Windows, Linux dan MacOS

Cara Install Composer di Windows 10

Pada tutorial ini saya hanya melibatkan Windows 10 karena saya menggunakan platform Windows. Bagi kamu yang menggunakan Linux atau MacOS bisa dilihat langsung di situs resmi Composer. Langsung saja berikut langkah instalasi Composer menggunakan Windows Installer :
1. Download installer Composer-Setup.exe
2. Pilih Install for all users.
Install For All Users

3. Klik Next saja.
Developer Mode

4. Browse direktori penyimpanan PHP. Disini saya menggunakan XAMPP jadi tinggal sesuaikan. Jika sudah klik Next.
Browse php.exe

5. Klik Next lewati saja.
Proxy Server

6. Terakhir klik Install.
Installing Composer

7. Terakhir setelah proses install sudah selesai klik Finish. Kemudian kita cek menggunakan cmd dengan mengetik perintah composer. Jika muncul seperti ini berarti berhasil.
composer cmd

Sekian tutorial tentang Cara Mudah Install dan Menjalankan Composer di Windows 10. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Jan 21, 2020

logoblog

Cara Membuat RecyclerView di Android Dan Menampilkan Data dari MySQL

RecyclerView Android

Membuat RecyclerView di Android Dan Menampilkan Data dari MySQL - Hai sobat blogcahti, sudah sekian lama saya baru update post lagi dikarenakan kesibukan kuliah membuat saya malas buka blog untuk membuat artikel baru. Tutorial yang saya bagikan kali ini cukup berbeda yaitu mengenai pemrogaman android yang berhubungan dengan tugas akhir kuliah. Tujuan tutorial ini yaitu mengambil data JSON yang telah diparsing dari database MYSQL dengan memanfaatkan library Retrofit. Kemudian dataset akan ditampilkan pada RecyclerView dalam bentuk list items.

Apa itu RecyclerView Android

Saya akan berikan sedikit penjelasan mengenai RecyclerView sebelum kita memulai membuat program. Singkatnya RecylerView adalah sebuah widget yang berfungsi untuk menampilkan dataset. Sebelum adanya widget RecyclerView, kita menggunakan ListView untuk menampilkan dataset. Kekurangan yang ada pada ListView dalam menghandle data yang besar dan dirasa kurang efisien menjadi alasan lahirnya RecyclerView, dimana dapat menampung dataset dalam jumlah besar.

Oke, itu sedikit penjelasan singkat RecylerView langsung saja kita praktekan dengan membuat program.

Langkah Membuat RecyclerView

Sebelum membuat project android, terlebih dahulu membuat database dan file .php untuk koneksi ke database.

Membuat Database Mysql

Pertama, buat database dengan nama "location".
Kemudian buat table dengan nama "location".

Buat struktur tabel dengan query :
CREATE TABLE `location` (
  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL,
  `lat` varchar(30) NOT NULL,
  `lng` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 

Insert value ke tabel dengan query :
INSERT INTO `location` (`id`, `name`, `lat`, `lng`) VALUES
(1, 'Universitas Amikom Yogyakarta', '-7.760508', '110.408542'),
(2, 'Universitas Negeri Yogyakarta', '-7.774721', '110.386242'),
(3, 'Universitas Gajah Mada', '-7.771374', '110.377472');

Jika tidak ada error lanjut ke tahap berikutnya.

Membuat File .php Koneksi Database

Buat direktori baru pada folder htdocs dengan nama "location" untuk menyimpan file php. Disini kita akan membuat dua file php yakni untuk koneksi ke database dan menampilkan field dari tabel.

Buat file connect.php dan getlocation.php
Setelah itu coba cek apakah json sudah bisa tampil dengan cara memasukan url localhost/recyclerview/getcontact.php?item_type=tb_recylerview

Maka hasilnya akan seperti ini :
[{"id":"1","name":"Universitas Amikom Yogyakarta","lat":"-7.760508","lng":"110.408542"},{"id":"2","name":"Universitas Negeri Yogyakrta","lat":"-7.774721","lng":"110.386242"},{"id":"3","name":"Universitas Gajah Mada","lat":"-7.771374","lng":"110.377472"}]

Tahap pembuatan project android.

Buka Android Studio, New > Project > Empty Activity dan beri nama RecylerView.

Tambahkan depedencies pada build.gradle (Module:app) seperti berikut :
//add these for lines implementation 'com.squareup.retrofit2:retrofit:2.4.0' implementation 'com.squareup.retrofit2:converter-gson:2.2.0' implementation "androidx.recyclerview:recyclerview:1.1.0" // For control over item selection of both touch and mouse driven selection implementation "androidx.recyclerview:recyclerview-selection:1.1.0-beta01"

Kemudian Sync project. Ingat! Saya menggunakan versi androidx, kalian bisa menyesuaikannya.

Ubah activity_main.xml seperti berikut :
Lanjut dengan membuat item.xml :
Buat class Adapter.java
Selanjutnya buat Interface dengan nama Api.java lalu ubah kind menjadi Interface MainActivity.java
Tambahkan permission internet di AndroidManifest.xml :
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Terakhir, Run App menggunakan emulator atau device yang tersambung USB. Terlebih dahulu aktifkan USB debugging di device android. Note : Ganti IP address di ApiClient.java dengan IP local komputer

Apabila terjadi masalah pada saat menjalankan aplikasi dengan error "java.io.IOException: Cleartext HTTP traffic to * not permitted" buka AndroidManifest.xml lalu tambahkan :
<application android:usescleartexttraffic="true" application=""></application>

Project source : GITHUB

Sekian tutorial tentang Cara Membuat RecyclerView di Android dengan Mysql. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.