Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10

Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10

Tutorial Windows

Blogcahti June 07, 2020

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.

(Baca juga : Cara Mudah Install dan Menjalankan Composer di Windows 10)

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

3. Masuk ke folder project yang sudah dibuat di D:\xampp\htdocs\nama_project_ci

4. Ketik perintah composer update

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

 

Jika berhasil, buka browser ketik http://localhost:8080 di address bar maka akan muncul tampilan halaman awal 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.

Cara Mudah Install dan Menjalankan Composer di Windows 10

Cara Mudah Install dan Menjalankan Composer di Windows 10

Tutorial Windows

Blogcahti June 07, 2020

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.

3. Klik Next.

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

5. Klik Next lewati.

6. Terakhir klik Install.

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

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.

Cara Membuat RecyclerView di Android Dan Menampilkan Data dari MySQL

Cara Membuat RecyclerView di Android Dan Menampilkan Data dari MySQL

Android Programming Tutorial

Blogcahti January 21, 2020

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.

Cara Mengatasi Microsoft Office Word Tidak Bisa Save File di Windows 10

Cara Mengatasi Microsoft Office Word Tidak Bisa Save File di Windows 10

Tips Tutorial Windows

Blogcahti December 21, 2019

Mengatasi Dokumen Microsoft Word Error Can Not Save File - Hai sobat blogcahti, kalian pernah mengalami error ketika akan menyimpan file ke drive tertentu? Sebagai contoh menyimpan dokumen word dan kemudian muncul pop up seperti ini "File not found. Check the file name and try again". Atau ketika akan menyimpan dokumen yang sudah diedit lalu muncul "Word cannot save or create this file. Make sure that the disk you want to save the file on is not full, write-protected, or damage".

(Baca juga : Cara Mengatasi Dokumen Word yang Tidak Bisa Dibuka (Corrupt))

Berhubung permasalahan ini pernah saya alami juga, kemudian saya telusuri dan alhasil masalah ini dikarenakan kita mengaktifkan fitur Controlled folder access. Fitur tersebut berguna untuk melindungi drive entah dari malware atau virus lainnya. Karena itu kita tidak bisa menyimpan file pada direktori yang telah terproteksi. Solusinya yaitu kita harus turn off protected folder dimana kita akan menyimpan file tersebut.

Langkah untuk menonaktifkan fitur Controlled folder access pada Windows 10

• Klik Start  > Settings .
  
• Pilih Update & Security > Windows Security.
  
• Klik Open Windows Security.
  
• Klik Virus & threat protection, dan pilih Virus & threat protection settings > Manage settings.
  
• Scroll kebawah pilih Controlled folder access > Manage Controlled folder access, lalu klik untuk nonaktifkan.

Selain itu kalian bisa mengatur sendiri folder yang akan diproteksi atau dihapus. Secara default ada beberapa folder pada drive C: yang terproteksi secara permanen saat fitur Controlled folder access diaktifkan. Kalian bisa menambah atau menghapus protected folder. Hapus protected folder yang digunakan untuk menyimpan file. Selesai.

Sekian tutorial tentang Cara Mengatasi File Dokumen Microsoft Word Tidak Bisa Save di Windows 10. Jika ada yang ingin ditanyakan, silahkah berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Penggunaan Attribut Colspan dan Rowspan di Table HTML

Penggunaan Attribut Colspan dan Rowspan di Table HTML

HTML Tutorial

Blogcahti April 12, 2018

Penggunaan Attribut Colspan dan Rowspan - Halo sobat blogcahti. Beberapa bulan ini saya jarang update artikel karena sibuk dengan urusan kuliah. Kali ini saya update artikel tentang HTML yang maerupakan salah satu tugas mata kuliah pemrogaman web.

HTML adalah pondasi sebuah web. Oleh karena itu kita wajib mempelajari dasar-dasar HTML terlebih dahulu. Selain itu CSS mendukung untuk pengembangan desain suatu web. Disini kita akan mempelajari apa itu attribut Colspan dan Rowspan pada tabel HTML. Mari kita menuju pembahasan yang lebih lanjut dibawah ini.

Pengertian Colspan Dan Rowspan

Jika kalian sedang mempelajari tabel HTML tentu harus mengerti fungsi attribut Colspan dan Rowspan. Colspan dan Rowspan merupakan attribut HTML yang berfungsi untuk menggabungkan beberapa kolom dan baris. Attribut tersebut dibungkus didalam tag <th> ataupun <td>.

Colspan sendiri merupakan kependekan dari Colomn Span yang berati banyaknya gabungan kolom dalam suatu tabel dan pada baris selanjutnya tetap diikuti oleh jumlah kolom yang sama atau lebih singkatnya kotak yang melebar kesamping.

Sedangkan Rowspan merupakan kependekan dari Row Span yang berarti banyak baris yang digabungkan atau lebih singkatnya kotak yang lebar kebawah. Jadi, kedua attribut tersebut bisa dikatakan memilik fungsi yang sama yaitu melebarkan atau menggabungkan.

(Baca juga : Cara Membuat Form Login HTML Paling Mudah)

Dengan demikian attribut Colspan dan Rowspan hanya digunakan pada kondisi tertentu. Supaya lebih jelas dan mudah dipahami akan saya berikan contoh script HTML sederhana.

Penggunaan Attribut Colspan dan Rowspan

1. Colspan

Penggunaan Colspan :

<td colspan=”2”>Teks Kolom</td>

(Catatan : Angka 2 adalah banyaknya kolom yang digabungkan)

Contoh Script

HTML

<!DOCTYPE html>
<html>
<head>
<title>Table Colspan Rowspan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Colspan and Rowspan</h2>
<table>
  <tr>
    <th>Nama</th>
    <th>Tipe Hero</th>
    <th>Jenis Kelamin</th>
  </tr>
    <tr>
      <td colspan="2">Alicard</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <td>Jhonson</td>
      <td colspan="2">Tank</td>
    </tr>
    <tr>
      <td colspan="3">Alice</td>
    </tr>
    <tr>
      <td>Harley</td>
      <td>Mage</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <td>Yi Sun Shin</td>
      <td>Marksman</td>
      <td>Laki-laki</td>
    </tr>
</table>
</body>
</html>

CSS

body{
  background: #eee;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 70%;
    margin:auto;
    left:0;
    right:0;
    background: #fff;
}

h2{
  text-align: center;
  color:#445;
  font-family: arial;
  font-weight: normal;
}

td, th{
    border: 1px solid #bbb;
    text-align: center;
    padding: 8px;
}

th{
  color:#eee;
  border-bottom:solid 1px #888;
}

tr:nth-child(1) {
    background-color: #666;
} 

Penjelasan :
Pada baris pertama tersebut terdapat attribut colspan=”2” yang berarti kolom Nama dan Tipe Hero digabungkan menjadi satu. Jadi, kita secara tidak langsung mengambil dua kolom sesuai urutan yaitu kolom 1 dan 2. Nah, kolom ketiga harus tetap kita buat karena kolom seluruhnya hanya ada 3 dan kita menyesuaikan yang sudah didefinisikan pada tag <td>. Oleh karena itu penulisan tag <th> hanya dilakukan sebanyak dua kali. Begitupun pada baris kedua terdapat attribut colspan yang menggabungkan kolom 2 dan 3.

Ketika script dijalankan di browser maka akan tampil seperti screenshoot diatas. Terlihat pada baris ke 1 dan 2 terdapat attribut colspan yang berarti baris tersebut mewakili beberapa kolom yang sudah ditentukan.

2. Rowspan

Penggunaan Rowspan :

<td rowspan=”3”>Teks Baris</td>

(Catatan : Angka 3 adalah banyaknya baris yang digabungkan)

Contoh Script

HTML

<!DOCTYPE html>
<html>
<head>
<title>Table Colspan Rowspan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Colspan and Rowspan</h2>

<table>
  <tr>
    <th>Nama</th>
    <th>Tipe Hero</th>
    <th>Jenis Kelamin</th>
  </tr>
    <tr>
      <td rowspan="2">Alicard</td>
      <td>Fighter</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <td>Tank</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td rowspan="2">Mage</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <td>Harley</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <td>Yi Sun Shin</td>
      <td>Marksman</td>
      <td>Laki-laki</td>
    </tr>  
</table>
</body>
</html>

CSS

body{
  background: #eee;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 70%;
    margin:auto;
    left:0;
    right:0;
    background: #fff;
}

h2{
  text-align: center;
  color:#445;
  font-family: arial;
  font-weight: normal;
}

td, th{
    border: 1px solid #bbb;
    text-align: center;
    padding: 8px;
}

th{
  color:#eee;
  border-bottom:solid 1px #888;
}

tr:nth-child(1) {
    background-color: #666;
}

Penjelasan :
Ada 2 atrribut rowspan pada baris 1 dan 3. Pada baris 1 kolom 1 digabung dengan baris 2 kolom 1. Oleh karena itu penulisan pada tag <th> di baris 2 hanya dilakukan sebanyak 2 kali karena yang satunya sudah diwakili oleh baris sebelumnya. Dan pada baris 3 kolom 2 dan baris 4 kolom 2 juga digabungkan menjadi satu, yang berati penulisan pada tag <th> di baris ke 4 hanya dilakukan sebanyak 2 kali karena kolom pertamanya sudah digabung oleh baris sebelumnya.

Seperti yang sudah saya jelaskan sebelumnya pada contoh script Colspan karena intinya sama, terlihat bahwa baris 1 kolom 1 dan baris 2 kolom 1, lalu baris 3 kolom 2 dan baris 4 kolom 2 digabungkan menjadi seperti screenshoot diatas saat dijalankan di browser.

KESIMPULAN

Sebenarnya penggunaan attribut ini cukup mudah dipahami karena kita hanya perlu melihat dimana baris atau kolom yang ingin digabungkan. Setelah itu kita abaikan berapa baris atau kolom yang akan kita buat selanjutnya.

Sekian tutorial tentang penggunaan attribut colspan dan rowspan pada table html. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.