X

Tuesday, December 29, 2020

Menghilangkan Index.php pada url Codeigniter

Bagi anda pengguna baru Codeigniter mungkin risih dengan adanya embel-embel index.php pada url ketika hendak mengakses controller lain. Misalnya url yang di inginkan adalah http://localhost/webku/auth/login namun yang dapat di akses adalah http://localhost/webku/index.php/auth/login.

Untuk menghilangkan embel-embel index.php ini sangat mudah anda bisa menggunakan bantuan .htaccess, untuk caranya silahkan ikuti langkah-langkah di bawah :

Langkah pertama buka dan edit file config.php pada directory application/config/config.php kemudian cari "$config['index_page'] = 'index.php';" dan hilangkan index.php sehingga menjadi "$config['index_page'] = '';".

Langkah kedua buat file baru dengan nama .htaccess di directory utama project anda, kemudian isi file tersebut dengan kode dibawah :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Langkah ketiga , silahkan tes dengan mengakses url yang awalnya terdapat embel-embel index.php, sekarang hapus index.php tersebut pada url. Jika berhasil maka website akan menampilkan sesuai dengan yang di inginkan.

Sunday, December 13, 2020

CARA IMPORT DATA DARI EXCEL KE DATABASE MENGGUNAKAN CODEIGNITER

Menginput satu persatu data kedalam database merupakan hal yang melelahkan apalagi ketika data yang di input berjumlah ratusan atau bahkan ribuan. Untuk mengatasi hal ini bisa menggunakan file excel, dimana terlebih dahulu data di buat dalam bentuk excel kemudian di upload ke WEB yang nantinya akan otomatis di masukkan kedalam database.

Pada postingan kali ini menggunakan framework Codeigniter dan menggunakan library PhpSpreadsheet. Jadi sebelum memulai bergelut dengan pembuatan, silahkan download terlebih dahulu library PhpSpreadsheet dengan menggunakan bantuan composer. Ketikkan perintah dibawah untuk mendownlaod

composer require phpoffice/phpspreadsheet


Berikut adalah contoh penggunaan Import Data Dari Excel Ke Database Menggunakan Codeigniter, dimana pada contoh ini menggunakan struktur database seperti pada gamabar.






<?php
defined('BASEPATH') OR exit('No direct script access allowed');
require 'vendor/autoload.php';

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Reader\Csv;
use PhpOffice\PhpSpreadsheet\Reader\Xlsx;

class Contoller extends CI_Controller {

public function aksi()
{
$file_mimes = array('application/octet-stream', 'application/vnd.ms-excel', 'application/x-csv', 'text/x-csv', 'text/csv', 'application/csv', 'application/excel', 'application/vnd.msexcel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

if(isset($_FILES['file']['name']) && in_array($_FILES['file']['type'], $file_mimes)) {

$arr_file = explode('.', $_FILES['file']['name']);
$extension = end($arr_file);

if('csv' == $extension) {
$reader = new \PhpOffice\PhpSpreadsheet\Reader\Csv();
} else {
$reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx();
}

$spreadsheet = $reader->load($_FILES['file']['tmp_name']);

$sheetData = $spreadsheet->getActiveSheet()->toArray();

for($i = 1;$i < count($sheetData);$i++)
{
$nama = $sheetData[$i]['0'];
$username = $sheetData[$i]['1'];
$password = $sheetData[$i]['2'];

$nra_fix = str_replace(' ', '', $nra);


$ar = array(
'nama' => $nama,
'username' => $username,
'password' => $password
);

$a = $this->Modelku->get('user', "username='$username'")->result_array();
if (count($a)==0) {
$this->Modelku->insert('user', $ar);
}
}

}
}
}
Perlu diperhatikan kode di atas menggunakan sebuah model dengan nama "Modelku", jadi silahkan buat model dengan nama yang sama terlebih dahulu kemudian tambahkan fungsi berikut.

function insert($table, $data)
{
	$this->db->insert($table,$data);
	return $this->db->insert_id();
}
function get($tabel, $where)
{
	$this->db->select("*");
	$this->db->from($tabel);
	$this->db->where($where);
	return $this->db->get();

}

Friday, December 11, 2020

Membuat Background Tools Auto Show Ketika ScrollView di Scroll


 

Pada postingan kali akan membahas bagaimana caranya membuat tools ataupun menu atas transparant yang mana apabila di scroll akan kembali memberikan background yang sudah di tentukan sebelumnya. Kurang lebih aplikasi akan tampak seperti pada gambar dibawah.





Penggunaan menu seperti ini akan memberikan tampilan yang menarik pada aplikasi. Tampilan yang menarik akan membuat pengguna aplikasi menjadi betah menggunakan aplikasi.

Langsung saja untuk cara pembuatannya silahkan ikuti langkah di bawah ini.

Tambahkan Gambar dan Icon ke Drawable

Untuk melengkapi tampilan layout yang akan dibuat, silahkan tambahkan 3 gambar format jpg dan 3 gambar icon ke res -> drawable. Gambar jpg bebas seusai keinginan. Untuk iconnya bisa di ambil melalui vector asset, baca Cara Menggunakan Icon Vector Asset bawahan Android Studio. Nantinya drawabel akan terisi beberapa file seperti berikut.







color.xml

Buka file color.xml di folder res -> values -> colors.xml kemudian buat edit kode menjadi seperti berikut :
	
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="transparan">#6D000000</color>
<color name="abu_abu">#D6D6D6</color>
<color name="putih">#FFFFFF</color>
<color name="biru_tua">#0770cc</color>
<color name="hijau">#00a651</color>
<color name="biru">#00BCD4</color>
</resources>

activity_main.xml

Salin dan paste kode dibawah ke activity_main.xml.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ScrollView
android:id="@+id/scrll_post"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView34"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:foreground="@color/transparan"
android:scaleType="centerCrop"
app:srcCompat="@drawable/img" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:orientation="horizontal">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginRight="0.5dp"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView38"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="@drawable/bc" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginLeft="0.5dp"
android:layout_marginRight="0.5dp"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView37"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="@drawable/bc" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginLeft="0.5dp"
android:layout_marginRight="0.5dp"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView36"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="@drawable/bc" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginLeft="0.5dp"
android:layout_weight="1"
android:orientation="vertical">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/imageView35"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:adjustViewBounds="true"
android:foreground="@color/transparan"
android:scaleType="fitXY"
app:srcCompat="@drawable/bc" />

<TextView
android:id="@+id/textView37"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:maxWidth="50dp"
android:text="Lihat Semua"
android:textColor="@android:color/white" />
</FrameLayout>

</LinearLayout>

</LinearLayout>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/abu_abu"
android:orientation="vertical"
android:paddingBottom="1dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/putih"
android:orientation="vertical"
android:padding="20dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">



<TextView
android:id="@+id/textView39"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:text="Tiket Aquaria KLCC"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/textView40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="8.3 Baik"
android:textColor="@color/biru_tua"
android:textSize="10sp" />

<TextView
android:id="@+id/textView41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="( dari 8632 review )"
android:textSize="10sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>


</LinearLayout>
</LinearLayout>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="@color/abu_abu"
android:orientation="vertical"
android:paddingBottom="1dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/putih"
android:orientation="vertical"
android:padding="20dp">

<TextView
android:id="@+id/textView43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:text="Fitur"
android:textColor="@android:color/black"
android:textSize="14sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:orientation="horizontal">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">


<TextView
android:id="@+id/textView42"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Konfirmasi Instan"
android:textColor="@color/hijau"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/abu_abu"
android:orientation="vertical"></LinearLayout>

</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

<LinearLayout
android:id="@+id/tlbar4"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/biru"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">

<ImageView
android:id="@+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_arrow_back_black"
android:tint="@color/putih" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="7dp"
android:layout_marginTop="7dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="7dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" />

<ImageView
android:id="@+id/imageView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:tint="@color/putih"
app:srcCompat="@drawable/ic_bookmark_border_black"
tools:ignore="VectorDrawableCompat" />

<ImageView
android:id="@+id/imageView33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:tint="@color/putih"
app:srcCompat="@drawable/ic_more_vert_black"
tools:ignore="VectorDrawableCompat" />

</LinearLayout>
</LinearLayout>

</RelativeLayout>

MainActivity.java

Salin dan paste kode dibawah ke MainActivity.java.

package id.kanre.toolbartransparent;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

private ImageView back;
private ScrollView scrll;
private LinearLayout tol;
private int nl = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
setContentView(R.layout.activity_main);

back = findViewById(R.id.back);
scrll = findViewById(R.id.scrll_post);
tol = findViewById(R.id.tlbar4);
tol.getBackground().setAlpha(0);

AksiScroll();
}
private void AksiScroll() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
int op = NilaiAksiScroll(scrollY, 500);
tol.getBackground().setAlpha(op);
}
});
}
}

public int Bulatkan(double f) {
int c = (int) ((f) + 0.5f);
double n = f + 0.5f;
return (n - c) % 2 == 0 ? (int) f : c;
}
public double CariPersen(double b, double a) {
double hasil = (a/b)*100;
return hasil;

}

public int NilaiAksiScroll(int scrollY, double batas){
if (scrollY> 0&&scrollY<batas) {
double c = CariPersen(batas, scrollY);
int aa = Bulatkan(c);
double y = (aa/100.0) * 255.0;
int op = Bulatkan(y);
nl = op;
}else if (scrollY>batas){
nl = 255;
}else{
nl = 0;
}
return nl;
}

}

Jalankan Aplikasi

Jalankan dan lihat bagaimana tampilan aplikasi akan tampak seperti pada gambar di bawah.





Penjelasan Kode


private void AksiScroll() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
int op = NilaiAksiScroll(scrollY, 500);
tol.getBackground().setAlpha(op);
}
});
}
}
Kode di atas akan berfungsi ketika aplikasi menjalankan class MainActivity.java, dimana dalam kode tersebut menginstruksikan program apabila scrll melakukan aksi scroll maka ambil nilai scroll dari scrollY dan tentukan kemudia masukkan kedalam method "NilaiAksiScroll()" ditambah batas dari scroll view akan mencapai nilai 100% dalam hal ini "500" sehingga menjadi NilaiAksiScroll(scrollY, 500);. Method "NilaiAksiScroll" kemudian mengembalikan nilai yang di masukkan kedalam variabel op (dalam hal ini tingkat transparansi).

Variabel op inilah yang kemudian digunakan untuk mengatur tingkat transparansi dari tool atau menu, dengan code tol.getBackground().setAlpha(op);. Perlu diperhatikan bahwa sebelumnya tool telah dibuat menjadi transparan dengan menggunakan kode "tol.getBackground().setAlpha(0);".

Perhatian

Kode if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { menandakan bahwa fungsi tersebut hanya bisa berjalan di android Marshmallow (6.0) atau yang paling terbaru.

Sunday, December 6, 2020

Cara Merubah Integer Menjadi Angka Romawi di PHP

Angka romawi kerap kali digunakan pada saat membuat website. Angka romawi ini bisa di tuliskan secara manual, hanya saja yang menjadi masalah ketika yang ditampilkan nantinya menggunakan perulangan atau memiliki banyak data yang mana datanya hanya berupa tipe data integer. Untuk mengakali hal ini bisa dilakukan dengan membuat function yang dapat merubah tipe data integer menjadi angka romawi.

Berikut fungsi untuk Merubah Integer Menjadi Angka Romawi di PHP.

function figureRomawi($angka)
    {
     $angka = intval($angka);
     $result = '';
     
     $array = array('M' => 1000,
     'CM' => 900,
     'D' => 500,
     'CD' => 400,
     'C' => 100,
     'XC' => 90,
     'L' => 50,
     'XL' => 40,
     'X' => 10,
     'IX' => 9,
     'V' => 5,
     'IV' => 4,
     'I' => 1);
     
     foreach($arrat as $roman => $value){
      $matches = intval($angka/$value);
     
      $result .= str_repeat($roman,$matches);
     
      $angka = $angka % $value;
     }

     return $result;
    }

Contoh penggunaannya seperti berikut :

<?php
function angkaRomawi($angka)
{
$angka = intval($angka);
$result = '';

$array = array('M' => 1000,
'CM' => 900,
'D' => 500,
'CD' => 400,
'C' => 100,
'XC' => 90,
'L' => 50,
'XL' => 40,
'X' => 10,
'IX' => 9,
'V' => 5,
'IV' => 4,
'I' => 1);

foreach($array as $roman => $value){
$matches = intval($angka/$value);

$result .= str_repeat($roman,$matches);

$angka = $angka % $value;
}

return $result;
}

$no = 0;
for ($i=0; $i < 100; $i++) {
$no++;
echo "angka romawi dari $no = ".angkaRomawi($no)."<br>";
}
?>
Hasil dari kode contoh di atas akan tampak seperti pada gambar di bawah :





Wednesday, December 2, 2020

REACTJS #2 MEMBUAT COMPONENT


 

Component dalam dunia pemrograman bisa di artikan sebagai bagian-bagian yang tersusun satu kesatuan dengan fungsi teretentu. ReactJS sebagai front end dari website mengadopsi sistem component, dimana website di bagi menjadi beberapa component kemudian digabungkan dalam satu frame. Component ini seperti navigasi, header, footer, content, dan lain sebagainya.

Menariknya component yang dibuat pada ReactJS dapat digunakan berulang kali di tempat manapun. Contohnya ketika membuat sebuah card view , programer hanya perlu membuat satu component card view kemudian memanggilnya berulang kali sesuai yang di inginkan.

Lalu bagaimana cara memulai membuat componetn di ReactJS ?
Mari simak langkah-langkah di bawah ini.

1. Buka project yang telah di buat

Bagi yang belum tahu cara membuat project baru ReactJS silahkan ikuti tutorial dari awal Cara Install ReactJs dengan Mudah.

2. Buat folder component

Buka project baru yang telah dibuat lalu buat folder baru dengan nama component pada directory src.





3. Buat file component baru

Pada folder component buat file baru dengan nama Component1.js. Isi file ini dengan kode berikut :


import React, {Component} from 'react';



class Component1 extends Component {

render(){

return(
<div>
<h1>Mencoba membuat Component</h1>
<p>Ini adalah contoh pembuatan Component</p>
</div>
);
}

}
export default Component1;

4. Panggil component ke App.js

App.js merupakan file utama yang akan tampil saat aplikasi dijalanka. Tambahkan component yang telah dibuat dengan terlebih dahulu melakukan import dengan code "import Component1 from './component/Component1';". Nama "Component1" harus sesuai dengan nama kelas dari component. Kode lengkap App.js seperti berikut.


import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
render(){
return (
<component1/>
);
}

}

export default App;
Hasilnya akan tampak seperti berikut :





Component ini dapat dipanggil berulang kali tanpa menuliskan ulang code html pad component, cukup dengan memanggil tag Component1 contohnya kode App.js seperti berikut:

import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
render(){
return (
  <div>
<component1/>
<component1/>
<component1/>    </div>
);
}

}

export default App;

Maka hasilnya seperti berikut :





Kemudian muncul pertanyaan bagaimana ketika bila ingin mengganti data di setiap component ?
Pertanyaan ini akan di jawab pada postingan selanjutnya di REACTJS #3 MENGIRIM DAN MENAMPILKAN DATA KE COMPONENT.