Source Code Aplikasi Web Potensi Desa Responsive dengan PHP PDO, jQuery, Ajax & MariaDB

Assalamu'alaikum wr. wb.

Selamat  pagi, siang, sore, dan malam sahabat YukCoding. Apa kabar hari ini? Semoga baik-baik saja. Amin.

Pada kesempatan yang indah ini, admin ingin berbagi demo salah satu aplikasi latihan yaitu source code Aplikasi Web Potensi Desa full responsive yang dibuat dengan menggunakan HTML, CSS. PHP ekstensi PDO, jQuery, Ajax dan menggunakan database MariaDB (versi terbaru dari database MySQL).

Berikut ini beberapa screenshot tampilan dari Apliakasi Web Potensi Desa responsive :

Oke langsung aja demo lengkapnya bisa dilihat di video berikut. Jangan lupa atur kualitas-nya menjadi HD agar jelas.

Untuk mendapatkan source code-nya, silahkan klik button download dibawah ini :




Happy coding dan semoga bermanfaat :)

Wassalamu'alaikum wr. wb.

#A3

Source Code Aplikasi Penjualan Barang (Kasir) / Simple POS

Assalamu'alaikum wr. wb.

How are you my beloved friends? I do hope that we are always healthy, Amin.
Kali ini admin ingin berbagi source code aplikasi penjualan barang yang biasa digunakan pada kasir, namun aplikasi buatan admin ini berbasis web. Admin menggunakan HTML, CSS, PHP, jQuery Ajax, jQuery UI, dan untuk database-nya menggunakan MySQL. Aplikasi ini masih simple dan belum kompleks, serta belum pernah di-update.

Selain aplikasi ini, kami juga mempunyai Aplikasi Kasir / POS (Point of Sales) yang lebih lengkap dan kompleks dengan framework CodeIgniter dan Laravel yang tentu sudah support Barcode Reader dan Printer Thermal. Info lebih lanjut hubungi kontak kami.

Oke kembali ke topik utama sesuai judul, demo aplikasi penjualan barang (kasir) / simple POS dapat teman-teman simak dengan scroll ke bawah.

Demo video aplikasi dan penjelasan fitur-fitur :

Untuk mendapatkan source code aplikasi ini, silahkan klik button download dibawah :



Ada juga aplikasi POS yang lain seperti yukPos (CodeIgniter), e-Kasir (CodeIgniter), TokoPOS (Laravel), dan SmartPOS (Laravel). Untuk demo silakan dm di instagram @yukcoding.

Semoga bermanfaat. Happy coding :)
Wassalamu'alaikum wr. wb.

#A3

Source Code Aplikasi e-Learning + Ujian Online (Soal Acak) Responsive

Download Source Code Aplikasi e-Learning + Ujian Online dengan Soal Acak

Assalamu'alaikum wr. wb.

Apa kabar temen-temen YukCoding? Semoga kita selalu sehat dan sukses, Amin.
Oke kali ini admin ingin berbagi source code aplikasi e-Learning dengan banyak fitur salah satunya fitur ujian online (soal acak) yang dibuat dengan PHP ekstensi mysqli, jQuery Ajax, dan untuk database-nya menggunakan MariaDB (versi terbaru dari database MySQL). Dan tentunya aplikasi ini responsive karena menggunakan Bootstrap :)

Langsung saja demo aplikasi dan penjelasan fitur-fitur "Aplikasi e-Learning + Ujian Online (Soal Acak) versi 0.1 beta" bisa Anda lihat pada video dibawah ini :

Oh iya, ada yang terlewatkan pada demo video diatas, yaitu aplikasi tersebut otomatis menampilkan info user sesuai yang login, dan untuk login sebagai admin, guru ataupun siswa, dapat mengedit info profil serta username / password mereka masing-masing.

Update Versi 0.2 Beta

Setelah membuat demo video, aplikasi ini kita update sedikit, yaitu :

a.) Ada tambahan laporan rekap nilai per siswa

b.) Administrator utama / guru dapat membuat topik soal untuk beberapa kelas sekaligus.

c.) Saat input soal pilihan ganda ataupun soal essay, administrator utama / guru dapat menggunakan soal yang diinputkan untuk beberapa / semua kelas sekaligus, ini berfungsi ketika input soal sekali saja dapat ditujukan untuk banyak kelas, agar tidak perlu input soal yang sama pada kelas yang lain.

Update Versi 0.2.2 Beta

- Perbaikan bug pada cetak nilai di admin saat tidak ada soal essay
- Menampilkan nilai akhir (total nilai) pada admin


Untuk mendapatkan source code aplikasi ini, silahkan klik button download dibawah :


Saat ini versi sudah sampai 0.2.3 dan juga versi lain dengan pembahasan soal 0.5.6. Kami juga mempunyai aplikasi e-learning lain yang lebih kompleks dengan framework laravel baru. Info demo dan harga hubungi kontak kami. Thanks.

Semoga bermanfaat. Happy Coding :)
Wassalamu'alaikum wr. wb.

#A3

Source Code Aplikasi Dealer Mobil dengan PHP mysqli, jQuery, Ajax & MariaDB

Assalamu'alaikum wr. wb.

Kali ini admin ingin berbagi source code aplikasi dealer mobil (pembelian mobil) yang dibuat dengan menggunakan HTML, CSS, PHP ekstensi mysqli dan jQuery Ajax, disini admin menggunakan database MySQL.

Oke langsung saja penjelasan fitur-fitur beserta demo aplikasinya bisa kalian lihat pada video dibawah ini :

Untuk mendapatkan source code aplikasi ini, silahkan klik button download dibawah :

Semoga bermanfaat. Happy coding :)
Wassalamu'alaikum wr. wb.

#A3

Membuat Edit & Hapus Data dengan PHP PDO + jQuery AJAX

Assalamu'alaikum wr. wb.

Apa kabar teman-teman ? Masih semangat coding kan, hehe.
Melanjutkan tutorial membuat web crud data dengan PHP ekstensi PDO + jQuery AJAX tanpa refresh halaman, kali ini kita akan membuat bagian edit dan hapus datanya.

Bagi kalian yang ketinggalan tutorial sebelumnya, silahkan ikuti dulu tutorial :

Tambah dan Tampil Data dengan PHP PDO + jQuery AJAX

Untuk demo halaman edit datanya seperti ini :

Dan demo halaman hapus data seperti ini :

Tutorial edit dan hapus data dengan PHP ekstensi PDO + jQuery AJAX bisa kalian ikuti pada video tutorial dibawah :




Jika ada yang kesulitan silahkan bertanya dikomentar. Jangan lupa like dan share tutorial-tutorial kami.

Tutorial PHP ekstensi mysqli :

1. Membuat CRUD dengan PHP Mysqli Prosedural
2. Membuat CRUD dengan PHP Mysqli OOP
3. Membuat Login dengan PHP Ekstensi mysqli OOP

Terimakasih atas perhatian Anda. Semoga bermanfaat, happy coding :)

Wassalamu'alaikum wr. wb.

#A3

Membuat Tambah & Tampil Data dengan PHP PDO + jQuery AJAX

Assalamu'alaikum wr. wb.

Pada tutorial kali ini kita akan belajar sesuatu yang baru teman-teman. Kalo pada tutorial-tutorial kita yang sebelumnya untuk pemrograman web khususnya PHP kita hanya menggunakan ekstensi mysql dan ekstensi mysqli, kali ini kita belajar tentang ekstensi PDO di PHP. Tak hanya itu pada tutorial kali ini kita juga akan belajar jQuery AJAX.

Bagi kalian yang belum tau apa itu jQuery AJAX silahkan baca :

Pengertian jQuery dan AJAX

Dan bagi kalian yang belum tau apa itu PDO extension PHP dan gimana cara mengaktifkannya, silahkan baca terlebih dahulu :

Pengertian PDO dan Cara Mengaktifkan PDO Extension

Kita akan membuat halaman web yang berisi CRUD PHP Ekstensi PDO dan jQuery AJAX tanpa refresh halaman (without reload page). Pertama kita akan membuat input (tambah) dan tampil data terlebih dahulu, untuk edit dan hapusnya silahkan ikuti pada tutorial selanjutnya.

Dan demo halaman input dan tampil data seperti gambar dibawah :

Untuk membuat tampilan seperti diatas saya hanya menggunakan HTML dan CSS manual. Bagi kalian yang ingin mempercantik tampilan serta membuatnya menjadi responsive bisa ikuti tutorial ini :

Membuat Desain Web Responsive dengan Materializecss

Sebelum kita menggunakan PDO, alangkah lebih baiknya Anda faham terlebih dahulu apa itu pemrograman berorientasi objek (OOP). Artikelnya bisa dibaca disini :

Konsep Dasar Pemrograman Berorientasi Objek (OOP)

Sekedar informasi bawah sebenarnya tidak full OOP fungsi-fungsi dari proses yang saya buat manual, jadi yang OOP hanya fungsi bawaan dari PDO. Jadi agak semi prosedural.

Ok langsung saja, tutorial tambah dan tampil data dengan PHP ekstensi PDO + jQuery AJAX bisa kalian ikuti dibawah.



Atau ini

Membuat Tambah & Tampil Data dengan PHP PDO... oleh yukcoding

Jika ada yang kesulitan silahkan bertanya dikomentar. Jangan lupa like dan share tutorial-tutorial di blog kami.

Tutorial selanjutnya : Edit dan Hapus Data dengan PHP PDO + jQuery AJAX

Semoga bermanfaat, happy coding :)

Wassalamu'alaikum wr. wb.

#A3

Pengertian jQuery dan AJAX

jQuery
JQuery adalah library JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event ataupun properti pada halaman web tersebut.

Dengan jQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

JQuery merupakan salah satu library yang membuat program web disisi client, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.

JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari library prototype yang menjadi inspirasi dari libarary jQuery ini. Secara pemrograman, jQuery memiliki kemiripan seperti prototype.

Perbedaan JavaScript dengan jQuery ialah :

jQuery itu library-nya, dan JavaScript bahasanya 

AJAX 
Asynchronous JavaScript And XML, atau disingkat Ajax, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari :

• XHTML (atau HTML) dan CSS untuk bahasa mark up dan tampilan.
• DOM yang diakses dengan client side scripting language, khususnya implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
• Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus Ajax, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.
• XML umumnya digunakan sebagai format untuk pengiriman data, walaupun format lain juga memungkinkan, seperti HTML, plain text, JSON dan EBML.

Seperti halnya DHTML, LAMP, atau SPA, AJAX bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

Intinya AJAX dapat bertukar data (send, reponse) hanya pada bagian yang diminta, tidak harus halaman web melakukan refresh dan mengirim seluruh halaman ke server.

#A3