Categories
ajax android JQUERY JSON

Membuat Aplikasi Android Hybrid dengan CORDOVA

Membuat Aplikasi Android Hybrid dengan CORDOVA

apache-cordovaAssalamualaikum WrWb.




Setelah Lama tidak membuat Tulisan, sekarang saya akan membahas mengenai cara membuat Aplikasi Android Hybrid dengan Cordova.  Q:Lalu apa bendanya dengan yang menggunakan intel XDK ? A: Ya Beda OM.. yg satu make bantuan intel XDK, yang ini langsung aja.

Note: Disini saya tidak menjelaskan bagaimana cara install Cordova, anda bisa mengintall nya disini.  Saya Anggap Cordova sudah terinstall di Laptop atau PC anda.

Langsung bagaimana maksudnya? ya kita hanya perlu membuat web menggunakan HTML + AJAX + JQUERY + JSON lalu diconvert dengan menggunakan Cordova.

Saya tidak akan panjang lebar menerangkan disini, anda bisa sedot atau download di

LINK INI  atau INI Ok saya anggap sudah, difolder yang anda sudah download, ada file bernama data.sql

silahkan anda Import ke Database mysql anda.

Anggap sudah selesai, Harusnya akan ada tampilan seperti berikut jika anda sudah jalankan

di Browser.

check_sign_icon_yellowPenjelasan singkat Program ini hanyalah program Insert data saja, yg saldonya bisa di set dan mencatat penjualan (Saya Buat ini untuk keperluan jualan Online :D)

Ok sampai disini langkah awal selesai.

Categories
ajax android JQUERY JSON

CRUD Android dengan Intel XDK dan MYSQL

CRUD Android dengan Intel XDK CORDOVA dan MYSQL + PHP

cordova                                                            &

XDK-Intel-app-html5-




Assalamualaikum Wr.Wb

Setelah sekian lama bersemedi sekarang sudah saatnya saya NgeWrodpress Dulu ilmu baru.

Ok pada kesempatan kali ini saya akan membahas lagi mengenai CRUD namun bukan di PHP, tapi di Android. Q:Dulu kan dah Pernah Pak? A: Ya dulu sudah pernah, dan dulu menggunakan Native,(bahasa android asli Java) sekarang bahasa yang lebih mudah dimengerti oleh Programer Web. Lalu bedanya?

Begini setelah sekitar sebulan saya ngulik Android ternyata sepemahaman saya cara membuat aplikasi Android itu ada berbagai macam. Ini singkatnya

#1. Dengan Native Menggunakan SDK Android, Android Studio sebagai Code Editornya dan menggunakan Bahasa JAVA

#2. Dengan Cordova + Android Studio (Apache Cordova adalah semacam Software yg dikeluarkan apache dan bisa membuat / membuild Android dari HTML5 + Javascript + PHP MYSQL) pokoknya yg terbiasa web juga bisa. Cordova atau Phonegap ini bisa dimasukkan ke Adroid Studio atau Eclipse sebagai code Editor dan di build disana, Emulatornya bisa menggunakan Android SDK atau Genymotion

#3. Dengan hanya menggunakan Cordova/Phonegap saja, dengan hanaya menggunakan Cordova/Phonegap saja juga bisa, setelah generate File2 yang dibutuhkan, lalu anda mendevelop tetap menggunakan Code Editor PHP atau Notepad++, Emulatornya juga bisa menggunkan GenyMOtion

4#. Cara terakhir menggunakan Intel XDK + phonegap + HP Android (saya akan menjelaskan yang ini, yg menurut saya paling mudah)

Kesimpulan diatas adalah murni pendapat saya, karena ini relative, team saya dikantor ada yang menggunakan cara ke 4, ada yg ke 1, ada yg ke 2 semuanya hampir sama, toh tujuannya sama membuat aplikasi android. So kita mulai saja dari pada kelamaan.

pertama anda harus punya intel xdk dan and bisa download di website berikut

Sudah semua, mari kita Coding, buka intel XDK anda, pertama anda pasti akan disuruh login. Anda login saja dan daftar di intel. tenang saja hanya untuk pertama. Selanjutnya anda pilih new project,

blog1Anda pastikan mencentang HTML5 + Cordova

Setelah sukses, anda akan di bawa kehalaman index.html. di index inilah kita mengisikan code yg nantinya akan kelur di androidnya. ingat kita mengcode di 2 tempat, HTML untuk tampilan android dan php untuk server sidenya.

JIka dijalankan akan terlihat seperti ini

tampil1Dan jika List nya di klik atau Add new akan terlihat seperti ini

tampil2Dan lain sebagainya. Tanpa banyak susah monggo di download saja disini 

ATAU DISINI

ada 2 folder nanti, yang app anda importkan kedalam Intel XDK dan yang server anda masukkan kedalam htdocsnya XAMPP atau webserver.

Untuk IP itu nanti anda ganti dengan IP Local Server Anda. Insyallah bisa langsung  jalan di Emulate nya. Untuk masalah bagaimana jadi APK akan saya bahas di petemuan selanjutnya

Feel Free untuk tanya jika ada massalah. Atau langsung Email ke saya saja di [email protected]

Semoga bermanfaat

Wassalamualaikum.




 

 

 

 

Categories
ajax JQUERY

Teknik Upload Foto/Gambar + Save Data dengan Ajax Jquery

Teknik Upload Foto/Gambar + Save Data dengan Ajax Jquery

jQuery-Ajax-Write-More-Do-Less








Assalamualaikum Wr.Wb

Oke pada kali ini saya akan sedikit membagikan teknik bagaimana cara Upload data / file atau gambar dengan menggunakan Ajax Jquery.

Mungkin salah satu dari anda bertanya, mengapa harus menggunakan ini Om? make PHP juga bisa. Memang bisa, saya juga dulu berpikir seperti anda. Namun nanti pada suatu saat ada Plugin atau sesuatu yang membuat Inputan tersebut tidak jalan dengan PHP atau butuh untuk akses data secara cepat, maka Jquery Ajax lah jawabannya. tanpa Banayk CIncong, langsung saja anda buat sebuah file dan beri nama form.php dan isi dengan code berikut

 

lalu anda buat satu file lagi untuk proses uploadnya beri nama upload.php

langsung saja deh anda jalankan, eh tambah 1 lagi, anda buat 1 Folder dan beri nama img ini digunakan untuk menyimpan Gambar atau hasil uploadtan anda.

upload

Nah jika tidak ada yang error maka setelah anda isi file upload, maka file tersebut akan segera masuk ke folder img.

Jika malas ngetik anda bisa download Sourcennya disini

Nah sekian semoga bermanfaat.

Jika ada pertanyaan tinggalkan comment saja

Wassalamualaikum Wr. Wb

 

 

 

 

 


Categories
ajax JQUERY

Teknik Insert data array menggunakan Jquery Ajax

Teknik Insert data menggunakan Jquery Ajax

jQuery-Ajax-Write-More-Do-LessAssalamualaikum Wr Wb

Pada kesempatan kali ini septiyo.com akan berbagi teknik cara insert ke mysql database menggunakan Jquery Ajax. Apa itu jquery ajax? Singkatnya suatu proses pengolahan data yang berada dibelakang layar / tersembunyi dan tanpa Loading n refresh 1 halaman penuh.

Cerita dikit dulu saya agak alergi menggunakan ajax, kenapa? karena untuk insert saja sintaxnya amat panjang, namun sejak ada Jquery syntax ajax jadi semakin simple dan karena keterpaksaan (ada suatu proyek yang proses savenya tidak bisa menggunakan proses $_POST pada php, jadi terpaksa saya belajar jquery ajax)

oke langsung saja,

 




anda bisa membuat file php dan beri saja nama index.php dan ketikan syntax berikut

penjelasannya nanti dulu,

sekarang anda buat file lagi dengan nama tampil_data_all.php

dan ketikkan kode berikut

Oke jika sudah coba anda jalankan syntax tersebut dengan mengakses index.php

akan ada total 2 kolom, mirip tabel.

inputNah jika muncul anda bisa klik save, jika muncul seperti ini

alert

Berarti anda sudah berhasil. Wow. Gan, kok gini aja? ya, saya barasumsi anda sudah bisa lah tinggal melanjutkannya ke mysql.

syntax yang kita pelajari tadi sudah berhasi mengambil dari textbox yang ada lalu melemparnya ke fike tampil_data_all.php, setelah data ditangkap tinggal di masukkan saja.

oke kita bahas scriptnya

ini adalah formnya, form input, biasanya jika menggunakan GET POST pada php, kita harus menggunakan tag <form></form> yang mengarahkan pada file yang dituju untuk exekusi query, namun dengan ajax jqyery tidak perlu, yang penting kita harus punya selector class=produk dan juga class=sipo

dan juga selector pada submitnya id=’woke’

Selanjutnya syntax

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

untuk mengambils Source CDN jquery online. (bagi yang tidak ingin online anda bisa dowload linknya si CDN itu)

syntax diatas untuk mengambil array dari formnya yang kebutulan hanya ada dua jenis yaitu produk dan qty.

adalah syntax jquery ajaxnya, type post untuk melempar data ke file lain, url untuk mengarahkan ke halaman yang dituju, data:{“q”: arr}, adalah array yang diambil dari syntax yang diatas dimasukkan kedalam variabel q, dataType:”html”, data tipe balikan, nanti setelah sampai ke file yang dituju akan mengembalikan type data dalam bentuk apa? ini saya pilih html dan yang terakhir function(php_script_response){ adalah function dalam jqyery ajax untuk melihat hasil echo atau php response. bisa juga untuk mengecho querynya.

Setelah script diatas selesai masuk kehalaman yang dituju

$uki = $_POST[‘q’];
hanya untuk mengambil file lemparan dari jquery yang tadi

foreach ($uki as $item) {

$sql_kj=”INSERT INTO order_kirim SET  account_id  = ‘$min’,
item_code  = ‘”.$item[‘produk’].”‘,
qty        = ‘”.$item[‘qty’].”‘,
periode1   = ‘2016-02-01’,
periode2   = ‘2016-02-01’,
tgl_upload = ‘2016-02-15 14:36:22′”;
$hasil_input_kj = mysqli_query($mysqli, $sql_kj);

echo $sql_kj;
};

syntax ini foreach hanya looping untuk mengulang arraynya dan menerukan hasilnya kedalam query. NOTE: query ini bisa anda modif, mau insert mau update mau apa saja teserah.

 

sudah selesai sampai disini,

saya harap anda paham dengan penjelasan saya. atau bisa tanya2 dulu.

semoga bermanfaat.

Wassalamualaikum

 




Categories
JQUERY

Teknik Menampilkan Data Secara List atau Grid dengan Jquery

Teknik Menampilkan Data Secara List atau Grid dengan Jquery




Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya akan membahas tentang tampilan. Bagaimana cara menampilkan data dari database atau dari soruce lain bisa dalam 2 bentuk Grid atau List tergantung selera user yg mengunjungi website kita.

Q:Maksudnya gimana sih kang ? Yang sperti apa maksudnya?

Yah saya ambil contoh website terkenal Bukalapak.com aja. di gambar berikut

Categories
JQUERY

Teknik Jquery link auto Scroll pada HTML

Teknik Jquery link auto Scroll pada HTML



Assalamualaikum Wr.Wb

Sudah cukup lama , juga, pada kesempatan kali ini saya hanya memberikan teknik jquery yang sekarang umum digunakan di website-website company profile pada perusahaan. Sebenarnya saya bingung juga memberikan judul. Intinya jika anda menekan sebuah link, maka halmann akan scroll otomatis ke link yang anda tuju secara smooth. Kurang lebihnya anda bisa liat link Demo berikut

Sampai disini saya harap anda sudah dapat gambaran. Jadi Cukup dengan tekan Linknya tuh disini maka halaman akan di scroll kan seara otomatis oleh jquerya.

Disini sebenarnya bisa hanya menggunakan Bawaan dari jquery corenya, namun saya tambahkan animatescoll.js  sehingga lebih mudah digunakan dan ada efek bouncenya. Memantul.

Setelah load kedua script ini

Selanjutnya anda bisa membuat link dengan Format seperti berikut

Penjelasan. untuk hrefnya dikosongkan saja atau diisi #

lalu event onclicknya diisi dengan

 #section-2 adalah id tujuannya. scrollSpeed adalaha kecepatannya, nilai makin besar makin lama gesernya. easing sampain ke belakang adalah type pergerakannya.

lalu untuk area yang dituju tinggal di tambahi kode

Lalu jalankan Aplikasi anda. Harusnya jika sudah benar maka link anda akan menuju ke ID ke tempat yang sudah anda tuju. Dan harus dipastikan lagi bahwa teknik ini untuk 1 link dengan halaman yang sama.

daripada lama-lama anda pasti ingin liat scriptnya, monggo di download saja di

mirror1  atau mirror2

Oke Sekian dari tutorial kali ini semoga bermanfaat. Jangan Lupa Komen

Terima kasih

Wassalamualaikum Wr.Wb




Categories
ajax JQUERY PHP

Teknik Combo Box Langsung Action dengan Ajax Jquery

Teknik Combo Box Langsung Action dengan Ajax Jquery

Assalamualaikum Wr. Wb

Setelah berbulan bulan vakum nulis sesuatu yang baru di blog ini akhirnya punya waktu lagi. Sekarang saat membagikan teknik baru dalam Per PHP an nusantara, Combo Box dengan menggunakn Ajax Jquery.. Maksudnya? ya COmbo Box tersebut langsung bisa action saat anda memilih dari Selecbox tanpa harus refresh Browser. Masih Nggak Ngeh, Oklah anda bisa klik DEMO  berikut ini.

 




Udah Paham kah maksudnya, jadi action langsung tanpa loading browser

Jika selectnya 2 maka yang dihasilkan juga 2

combo1

Jika 4 atau seterusnya juga bisa memnyesuaikan

combo2

Lalu gunanya untuk Apa Pak? ya untuk macam-macam, tergantung program anda. Fokus saya disini hanyalah memberikan tekniknya saja.

Jika ingin melihat sourcenya anda bisa langsung Sedot saja di sini

MIRROR1 atau MIRROR2

Oke Sekian dari saya, bagi yang merasa terbantu atau apalah, minimal Komenlah, jangan jadi Silence Reader Aja. atau jangan kalau script gak bisa baru Komen HADEH .

(Gw sih kalau terbantu ama script orang minlmal say Thanks Gan. Kalau gak bisa juga tetep komen biar tahu permasalahnnya) 😀

Happy Coding

Wassalamualaikum Wr.Wb




Categories
JQUERY JSON PHP

Teknik Cek Ketersediaan Email dengan JQuery Validate dan MySQL

Teknik Cek Ketersediaan Email dengan JQuery Validate dan MySQL




 

Assalamualikum,

Oke, setelah vakum sekitar 3 bulan karena sedang males nulis blog, akhirnya saya kembali lagi, hitung-hitung menyebarkan Ilmu yang didapat + membuat Library saya agar tambah banyak.

Sebenarnya saya bingung memberikan judulnya, namun jika anda sering menggunakan social media, mungkin Facebook, atau Gmail saat anda daftar pasti anda akan disuruh untuk input Email bukan? nah saat input email (yg mana anda belum tahu atau sedang lupa pernah daftar belum ya di web tersebut) dan saat anda masukkan ke kolom text box nya, maka lansung ada validasi dan memberi anda info “Maaf Email anda sudah terdaftar, atau Not Availeble dan sejenisnya” Itulah yang akan kita bahas disini versi simplenya dengan menggunakan Bantuan Jquery Validate.

Oke tanpa banyak cincong lagi anda buat saja

sebuah database baru di mysql anda. dan beri saja nama kampus.

lalu anda bisa mengisinya dengan data ini

Categories
JQUERY PHP

Cara membuat Grafik dengan PHP dan MYSQL

Cara membuat Grafik dengan PHP dan MYSQL

Assalamualaikum, Wr.Wb

Oke pada kesempatan kali ini saya akan membahas tentang cara membuat grafik di PHP dengan bantuan Jquery yang bernama Jquery Hight Chart.

Sebenarnya ada banyak cara membuat chart atau diagram di PHP, salah satunya dengan Library/class php sendiri. Namun keliatannya lebih mudah menggunakan Jquery.

DEMO

Langsung saja tanpa banyak basa basi. anda Create Dulu tabel di mysql anda dengan data berikut ini

Categories
JQUERY JSON PHP

Membuat Search Autocomplate menggunakan JQUERY dan JSON

Membuat Search Autocomplate menggunakan JQUERY dan JSON

Assalamualaikum,

json

Alhamdulillah, setelah lebih dari seabad saya tidak update ini blog, karena sedang di suruh fokus ke Advertising sama si Bos, akhirnya ini mau update masalah JSON.

 



Q: Apa itu JSON?
A: JSON singakatan dari Javascript Object Notation. ini adalah tipe file atau format untuk penyetoran sebuah data. lebih tepatnya seperti XML. kalau masih bingung anda bisa membaca keteranannya disini

Categories
JQUERY PHP

Teknik Searching Auto Suggest mirip Google dangan PHP, Jquery, dan MySQL

Teknik Searching Auto Suggest mirip Google dangan PHP dan Jquery

Assalamualaikum,

Halaman ini saya buat berawal dari kebingungan saya mau ngapain di kantor, kerjaan sudah beres, Deadline masih cukup lama, mau update Twitter yang baru juga gk minat (Abisnya follower cuman Satu Hiks, Twitter yg lama dibanned) barang kali ada yang nyumbang Follow ke saya.. hehe @septiyo_21

Oke langsung saja, to the point, fasilitas search / pencarian pada sebuah applikasi adalah sesuatu yang penting, berawal dari keinginan saya membuat aplikasi seperti Mbah Google auto Suggest, yg belum tahu auto suggest adalah, jika kita mengetik 1 huruf saja, maka pencarian secara otomatis akan dilakukan perhuruf. Keren banget.