Tuesday 3 December 2019

Install React Native to Windows 10

Sumber : https://miro.medium.com/max/820/1*1MWkosYugNk7bLLfRHtEfQ.jpeg

Alhamdulillah setelah sekian lama tidak update artikel, ahirnya bisa update kembali. Apa kabar kalian semua ? semoga dalam keadaan sehat dan di mudahkan dalam mencari rizki.

Pada kesempatan kali ini saya akan membahas bagaimana melakukan instalasi React-Native pada Windows 10. React-native itu sendiri merupakan library besutan Facebook untuk membangun aplikasi mobile Android maupun IOS. Selain itu, dengan menggunakan React-Native kita bisa membangun aplikasi mobile dengan mudah.

A. Instalasi

Ok, langsung saja kita praktekkan bahan apa aja yang dibutuhkan.
1. Install Node.js
2. Install JDK
3. Install Android Studio
 
Ketiga bahan diatas bisa kalian dapatkan pada situs resmi masing-masing.
 
*Pada kasus ini saya menggunakan Windows 10.
 
*Instalasi React-native tanpa Expo. 

*Khusus Android Studio, yang kita butuhkan hanya SDK nya saja, sebernarnya tidak harus install Android Studio cukup download SDK nya saja. Kenapa harus instaall Android Studio..??? maksud saya agar lebih mudah ketika melakukan update SDK jika ada versi yang baru, jadi alangkah baiknya kalian install saja Android Studio.
 
*Tapi harus diperhatikan ketika malakukan instalasi Android Studio, pada bagian lokasi PATH SDK nya, usahakan lokasinya jangan di direktori C, karena size SDK nanti bisa sampai puluhan GB..
*Versi bahan-bahan yang saya gunakan
1. Node Js =>  10.16.0 (bisa pakai yang terbaru)
2. JDK => 8u131 (bisa pakai yang terbaru)
3. Android Studio => 2.3.3 (bisa pakai yang terbaru)
4. React-Native => Sesuai selera kalian (bisa pakai yang terbaru)

B. Setting Variabel

Jika sudah selesai melakukan instalasi bahan-bahan diatas, selanjutnya kita akan melakukan konfigurasi Variabel. Silahkan kalian ketikan env/environment pada pencarian windows 10, dan klik Edit the system environment variables.
Akan muncul tampilan seperti berikut, klik environment variables.
Pada tampilan berikut kita fokus pada bagian User Variables.


Selanjutnya klik new pada bagian User Variables,
1. Variabel name : ANDROID_HOME,  Variable Value: *lokasi sdk kalian
2. Variable name : JAVA_HOME, Variable Value: *lokasi JDK kalian

Selanjutnya ke bagian  System Variables.
.
Cari variable Path kemudian klik 1 kali, lalu klik tombol edit.
kemudian klik new, dan ketikan alamat 'lokasi sdk kalian/platform-tools' dan klik Ok.

C. Instalasis React-Native

1. Buka Comand Promt kalian, kemudian ketikan ini
npm install -g react-native-cli
tunggu sampai selesai. 
 
2. Selanjutnya silahkan kalian buat folder khusus untuk project React-native kalian, untuk lokasinya bebas dimana saja.
3. Kembali ke Comand Promt, kemudian arahkan root direktori ke project React-native yang dibuat tadi.
ex : misal projectnya di E:\react-native. Pada Comand promt yang terbuka tadi ketikan E: (E tambahkan titik 2), maka akan berpindah root directori ke E, selanjutnya ketikan 'cd react-native'(tanpa kutip) dan enter, maka kita akan berada dalam folder react-native.
4. Langkah selanjutnya kita akan mendownload project React-native dengan cara.
react-native init nama_project_kalian
atau jika pengen sesuai versi bisa pakai ini
react-native init nama_project_kalian --version x.xx.x
dan tunggu sampai selesai,
5. Jika sudah selesai instalasi, selanjutnya ketikan pada comand promt kalian 'cd nama_project_yang _dibuta_tadi' tanpa kutip (lokasi kita saat ini E:\react-native\project yang di buat tadi).
6. Selanjutnya silahkan hubungkan Smartphone kalian ke laptop/komputer menggunakan kabel USB.
7. Setelah itu ketikan pada Comand Promt
react-native run-android
atau
react-native-run-ios
*penting, untuk pertama kali menjalankan project react-native ke Smarphone biasanya membutuhkan waktu yang sedikit lama karena akan ada yang di download sesuai dengan versi OS Smartphone kalian.
 
Selamat mencoba....

Sekian dulu cara instalasi React-native pada windows 10,
jika ada yang ingin dipertanyakan silahkan isi kolom komentar di bawah.
Semoga bermanfaat.... 

Monday 23 September 2019

Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 2


Kesempatan kali ini titikk0ma akan melanjutakan tutorial tentang Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 1, di bagian ini yang kedua ini membahas bagaimana cara menyimpan data dan memilih salah satu data dari tabel kemudian akan di tampilkan ke dalam form.

Pertama kita buat sebuah fungsi untuk simpan, misal nama fungsinya store(), nama fungsi bebas sesuai selera asalkan nama fungsi di awali dengan huruf, kodenya sebagai berikut :



Baris 4 pada bagian "nama="+$('[name="nama"]').val(), mengambil nilai dari form yang textbox namenya nama, dan seterusnya.
Baris 5 alamat file yang di gunakan untuk memproses data, disini misal nama filenya store.php.
Baris 6, jika program kita berjalan lancar saat menyimpan data, maka baris ini yang di jalankan, namun terkadang kita melakukan kesalahan saat menyimpan data, untuk mengantisipasi agar kesalahanya tau di bagian mana, bisa di tambahkan error: . letakkan pada bagian setelah success : function(result){.........},error : function(a,b,c){alert(a)}. alert(a) bisa gi ganti b atau c.
function(result). result adalah nama parameter penampung data yng di kirim dari file store.php.
Baris 7 pemanggilan fungsi reset(), bertujuan agas setelah menekan tombol simpan, form yang di isikan data tadi akan menjadi kosong.
Baris 8, JSON.parse(result) berguna agar data bisa di tampilkan. untuk melihat perbedaan datanya bisa menggunakan console.log(), misal console.log(result) dan console.log(JSON.parse(result)), letakan di atas fungsi reset().
Baris 9 dan 10, index pesan dan data di buat di file store.php.

Selanjutnya buat file store.php :


Baris 17, data akan di rubah kedalam bentuk json agar bisa di olah lagi oleh javascript, makanya tadi ada kode JSON.parse(result) untuk merubah data json tadi kedalam bentuk objek agar bisa di olah atau digunakan.

Langkah selanjutnya buat fungsi reset() :




Buat fungsi select(), untuk menampilkan data tertentu yang di klik pada tabel kedalam form :


Baris 1, kode merupakan parameter penampung data yng di dapat dari tombol select;


Baris 4, 'id='+kode. kita membuat index id yang nilainya kode, id ini yang akan kita gunakan pada file showId.php.

Selanjutnya kita buat file showId.php :
Baris 5, $_POST['id']. id di dapat dari index yang kita buat pada langkah sebelumnya.

Sekian dulu Tutorial CRUD PHP AJAX Sederhana Umtuk Pemula Part 2,

Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 1,
Tutorial CRUD PHP AJAX Sederhana Umtuk Pemula Part 3

Jika ada yang di tanyakan silahkan isi kolom komentar di bawah,
Terimakasih sudah mampir semoga bermanfaat...

Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 3

Part ini merupakan bagian terahir dari Tutorial CRUD PHP AJAX Sederhana Untuk Pemula, bagian ini akan membahas mengenai edit dan hapus data.

Pertama buat fungsi baru, misal nama fungsinya update() :



Selanjutnya buat file untuk proses updatenya, misal nama file nya update.php : 


Kembali ke file index.php, buat fungsi baru untuk bagian hapus, misal nama fungsinya getDelete() : 


Lalu buat file untuk proses hapusnya, misal nama filenya delete.php : 


Terahir buat lagi fungsi baru pada index.php untuk tombol cancel, misal nama fungsinya cancel() : 


Kurang lebih fungsi edit dan hapusnya untuk Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 3 seperti di atas, silahkan teman-teman ubah dan berkolaborasi sesuai kreatifitas teman-teman

Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 1,
Tutorial CRUD PHP AJAX Sederhana Umtuk Pemula Part 2

Jika ada yang di pertanyakan silahkan isi kolom komentar di bawah,
Terimakasih sudah mampir, semoga bermanfaat...

Thursday 19 September 2019

Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 1





Alhamdulillah setelah sekian lama ahirnya bisa posting Tutorial CRUD PHP AJAX Sederhana Untuk Pemula. Pada kesempatan kali masih mengenai program CRUD PHP sederhana, hanya saja pada kali ini menggunakan cara yang sedikit berbeda meskipun intinya sama. Tutorial pada kali ini memakai bantuan file JQUERY, Jquery sendiri memiliki banyak fungsi yang sangat membantu untuk tampilan website menjadi lebih menarik.
Untuk menggunakan Jquery, rekan rekan harus mempunyai file jquery nya, jika tidak ada bisa di cek di Situs Resminya dan letakkan di dalam folder projek rekan rekan.
Pertama silahkan rekan-rekan buat database, kemudian buat tabel misalnya nama tabelnya karyawan.

Langkah ke dua, silahkan buat file koneksi.php simpan di dalam folder project.
Selanjutnya silahkan buat project di dalam folder htdocs, lalu buat file dengan nama index.php,
isi file nya seperti berikut.


Baris 51-55, berfungsi untuk menampilkan tombol show(), dan hide() untuk menyembunyikan tombol.

Lalu kita buat untuk bagian tampil datanya, misal nama filenya view.php :


Sekian dulu untuk Tutorial CRUD PHP AJAX Sederhana Untuk Pemula Part 1

Tutorial CRUD PHP AJAX Sederhana Umtuk Pemula Part 2,
Tutorial CRUD PHP AJAX Sederhana Umtuk Pemula Part 3

Jika ada yang di pertanyakan silahkan isi kolom komentar di bawah...
Terima kasih sudah mampir, semoga bermanfaat..

Tuesday 12 March 2019

CRUD Upload File Menggunakan CODEIGNITER Part 4

Pada bagian CRUD Upload File Menggunakan Codeigniter Part 4 ini akan membahas cara menghapus data file.

Download Notepad++ DiSini
Download Sublime Text 3 DiSini
Download Xampp DiSini
Download CodeIgniter 3.1.6 Disini

Berikut Langkah-langkahnya:
1. Buat fungsi bari misal delete, function delete($id). Berikut Scriptnya:

Cara delete ini sama seperti update, hanya beda pada perintah query saja.
Baris 64, function delete($id), $id adalah parameter penampung id file yang dikirim dari view dari view upload_file.php tepatnya pada baris 29.

Baris 65, memanggil data berdasarkan id file.

Baris 65-67 , adalah pengecekan file jika ada maka akan dihapus dari folder file.

Baris 69, Proses hapus data dari database berdasarkan id_file tertentu.

Part 1 bisa dilihat Disini
Part 2 bisa dilihat Disini
Part 3 bisa dilihat Disini

Itulah CRUD Upload File Menggunakan Codeigniter part 4, jika ada yang ingin di pertanyakan silahkan komentar di bawah.

Terimakasih sudah mampir, semoga bermanfaat...

CRUD Upload File Menggunakan Codeigniter Part 3

Pada kesempatan kali ini titikK0ma.blogspot.com akan melanjutkan tutorial tentang CRUD File Menggunakan CODEIGNITER . Pada bagian ini adalah part yang ke 3. Pada bagian ini yang di bahas tentan update data file.
Berikut langkah-langkahnya:

Download Notepad++ DiSini
Download Sublime Text 3 DiSini
Download Xampp DiSini
Download CodeIgniter 3.1.6 Disini

1. Buat function baru misal edit(). Berikut scriptnya:
Baris 37, Proses pemanggilan data ke database berdasarkan id tertentu. Pada function edit($id), $id adalah parameter penampung dari id yang akan dikirim dari view upload_file.php tepatnya pada baris 28.

Baris 38, proses pemanggilan view edit_file.php, ['res'=>$res] adalah proses pengiriman data yang sudah didapatkan berdasarkan id tertentu.

2. Buat file edit_file.php pada folder views. Berikut scriptnya:
Baris 16, 'welcome/update/'.$res[0]['id_file']. untuk $res[0]['id_file'] adalah id_file yang didapat dari pengiriman data pada baris 38 untuk nama id_file sesuai dengan kolom pada database, lalu $res[0]['id_file'] yang sudah di terima akan dikirim lagi ke controller welcome function update.

3. Selanjutnya buat funciton update($id), Scriptnya sebagai berikut:
Baris 41, funciton update($id), $id adalah paramenter penampung dari  data yang dikirim dari view edit_file.php tepatnya di baris 16 'welcome/update/'.$res[0]['id_file'].

Baris 57-59, proses hapus file yang berada pada folder file yang posisinya sejajar dengan folder application,system, user_guide.

Part 1 bisa dilihat Disini
Part 2 bisa dilihat Disini
Part 4 bisa dilihat Disini

Itulah CRUD upload file Menggunakan Codeigniter Part 3. Jika ada yang dipertanyakan silahkan isi kolom komentar di bawah.

Terimakasih sudah mampir semoga bermanfaat...

CRUD Upload File Menggunakan CODEIGNITER Part 2

Kesempatan kali ini titikK0ma.blogspot.com akan melanjutkan tutorial part 2 mengenai CRUD Upload File Menggunakan Codeigniter Part 1. Untuk bagian part 2 akan membahas bagian tambah data file. Jika rekan-rekan belum melihat part 1, bisa dilihat CRUD Upload File Menggunakan Codeigniter Part 1.

Download Notepad++ DiSini
Download Sublime Text 3 DiSini
Download Xampp DiSini
Download CodeIgniter 3.1.6 Disini

Langkahnya sebagai berikut:
1. Buat function baru pada Controller Welcome, misal function store(){}, Kodenya sebagai berikut:
Baris 18-20, kita seperti melakukan configurasi misalnya file hasil upload nanti di letakkan dimana, jenis file yang boleh di upload apa aja, apakah kita ingin memberi nama baru file atau nama bawaan file, size yang di perbolehkan saat upload brapa, dan masih banyak lagi. disini admin hanya menggunakan 3 yaitu $config['upload_path']='dimana lokasi file ketika di upload', $config['allowed_types']='jenis file apa aja yang diperbolehkan, $config['file_nama']='memberi nama baru file'.

Baris 21, seperti melakukan persetujuan dari $config[] yang di buat sebelumnya, maksudnya.. untuk baris 19-20 ibaratnya kita membuat aturan untuk file yang di upload,kemudian di initialize() di baris 21 atau persetujuan.

Baris 22-26, melakukan cek file yang di upload, apakah sesuai dengan baris trutama 19-20. jika tidak sesuai maka kode ini yang akan dijalankan. Baris 24 adlah pengalihan halaman, setelah tidak sesuai file yang di upload akan di alihkan kemana, misal ke base_url() atau alamat project kita yang sudah di seting sebelumnya di folder config/config.php.

Baris 26-33, adalah jika file yang di upload sesuai dengan peraturan yang di buat terutama baris 19-20 maka kode ini yang akan dijalankan.

Baris 27. kita memanggil file yang di upload. pada baris ini kita sudah dapat informasi tentang file yang di upload seperti size, width, file_name, client_name,path, dan lain-lain.

Baris 28-31, proses simpan file ke database, Ingat yang disimpan hanya nama filenya saja. untuk filenya sudah tersimpan ke folder yang sudah kita atur pada Baris 18 yang mana nama foldernya adalah file, lokasinya berada sejajar dengan folder application,system,user_guide. silahkan buat folder file jika belum ada. Posisinya harus sejajar dengan application,system,user_guide.

Baris 32, adlah pengalihan halaman setelah proses upload berhasil.

Part 1 bisa dilihat Disini
Part 3 bisa dilihat Disini
Part 4 bisa dilihat Disini


Sekian dulu CRUD Upload File Menggunakan Codeigniter Part 2, jika ada yang dipertanyakan silahkan isi kolom komentar di bawah.

Terimakasih semoga bermanfaat....

CRUD Upload File Menggunakan Codeigniter Part 1

Pada kesempatan kali ini titikK0ma.blogspot.com akan memberikan tutorial bagaimana cara upload file dengan cara menggunakan Framework CODEIGNITER. Untuk versi Frameword yang digunakan yaitu 3.1.6, rekan-rekan bisa menggunakan versi lain asalakan tetap versi 3 karna CODEIGNITER ada versi 2.x.x dan yang terbaru sekarang CODEIGNITER versi 4 namun masih alpa.

Download Notepad++ DiSini
Download Sublime Text 3 DiSini
Download Xampp DiSini
Download CodeIgniter 3.1.6 Disini

Langkah-langkahnya sebagai berikut :
1. Pastikan rekan-rekan sudah menjalankan aplikasi Xampp, dan aktifkan bagian Apache dan MySql.

2. Buat Database terlebih dahulu beserta tabelnya, Untuk tabel yang admin buat terdiri dari 3 kolom ( id_file, nama_baru, nama_ori).

3. Selanjutnya extrak Codeigniter nya, kemudian hasil extrak tadi di pindahkan ke dalam lokasi C:\\xampp\htdocs\pindah_keesini. jangan lupa ganti nama folder Codeignternya dengan yang lebih mudah misal namanya uppload-file. Lalu coba buka browser dan ketikan di address bar localhost/nama_projec_rekan_rekan atau 127.0.0.1/nama_project_rekan_rekan. jika berhasil tampilanya akan seperti berikut:
4. Selanjutnya lakukan configurasi padaCodeigniternya.
 - Masuk ke project rekan-rekan, buka file autoload.php => application/config/autoload.php pada bagian $autoload['libraries'] = array() ubah menjadi $autoload['lbraries'] = array('database').
 - Masih di dalam folder config buka file config.php.  $config['base_url'] ='' ubah menjadi $config['base_url'] = 'url project rekan-rekan' misal $config['base_url']='127.0.0.1/b/ci_upload_file sesuaikan dengan yang rekan-rekan buat.

5. Masuk folder application/controllers buka file Welcome.php. tambahkan function __construct() dan ubah funciton index nya. hasilnya seperti berikut:
Baris 6, adalah fungsi yang pertama kali dijalankan ketika class itu terpanggil.

Baris 8, pemanggilan library upload yang terdapat pada Codeigniter, agar bisa melakukan upload file. library ini wajib di panggil ketika kita melakukan upload file. library form inin berfungsi agar penulisan form nanti lebih simple.

Baris 9, pemanggilan helper url agar base_url yang disetting sebelumnya bisa di gunakan. ini juga wajib karna base_url nanti sangat dibutuhkan untuk melink kan dari view ke controller agar lebih mudah.

Baris 13, kita membuat variabel $res yang nilanya berupa array(). kemudian membuat index res yang nilanya perintah memanggil tabel $this->db->get('nama_tabel')->result();

Baris 14, memanggil view yang bernama upload file, namun extensi filenya tidak perlu di tulis cukup nama filenya saja. lalu kita mengirim vaariabel $res ke view untuk menampilkan data dari tabel yang di panggil.

6. Masuk ke folder application/views lalu buat file upload_file.php. buat script seperti berikut:

Baris 36,41,47 ini adalah penulisan form jika menggunakan aturan Codeigniter. sebenarnya sepeerti kita membuat form biasa dengan tag HTML. ini hanya memanfaatkan library form dari Codeigniter agar penulisan lebih simple.

Baris 23, melakukan perulangan data. $res didapat dari index yang sudah di set pada Controller Welcome. $res = ['res'=>........]; $res baris 23 di view upload_file.php di dapat dari  res  di controller Welcome baris 13, ingat res bukan $res. res pada welcome baris 13 harus sama dengan $res upload_file.php baris 23.

Baris 28, 'index.php/welcome/edit/'.$data->id_file, $data->id_file adalah id file yang akan dikirim ke controller welcome function edit($id). setelah dikirim ke controller welcome function edit($id) nilai dari $data->id_file akan di simpan pada parameter $id function edit($id).  untuk editnya akan dibahas pada tutorial selanjutnya.

Part 2 bisa dilihat Disini.
Part 3 bisa dilihat Disini
Part 4 bisa dilihat Disini


Sekian dulu CRUD Upload File Menggunakan Codeigniter semoga bermanfaat. Jika ada yang dipertanyakan silahkan isi kolom komentar di bawah.
Terimakasih selamat mencoba....