Modal Lookup dengan DataTables

Kalau Modal Bootstrap sih paham? kalau Lookup apa ya? Lookup ini bisa juga digunakan untuk pengganti select dan biasanya digunakan bila data anda berjumlah banyak, Lookup ini sangat membantu dalam pencarian data, terutama jika kita patukan dengan DataTables. Untuk mencoba keasyikannya menggunakan Lookup, yuk kita coba bersama - sama.

Sebelum kita membuat Lookup, karena kita menggunakan data tables kita harus mempunyai library DataTables terlebih dahulu, bisa di download disini. Jika sudah buat data base seperti gambar dibawah ini.

Hal-hal yang dibutuhkan : 

1. PC / Laptop yang sudah terinstal Web Server
2. Koneksi Internet
3. Data base

Tahapan Pembuatan :

1.  Buat folder di directory html (Linux), htdoc(Windows).
2.  Masukan library data tablesnya.
   
3.  Kita buat index.php dan masukan script ini.
   
   
4. Jika sudah masukan script untuk Modal.
   
5. Kemudian masukan script untuk data tablenya
   
6. Save dan kita lihat hasilnya di web browser.
7. Demikian hasilnya.
   
   
   
   

Manfaat Menggunakan Lookup :

1. Mempercepat pencarian data.
2. Memudahkan untuk mengelola data.

Referensi :

1. DataTables
2. HarviaCode

Semoga Bermanfaat !!!

Sharing Bersama Rekan Kerja BLC Telkom Klaten

Sudah tidak terasa sudah 2 minggu saya pulang ke sekolah untuk menjalani kewajiban saya di sekolah, yaitu menjalani Ujian Kenaikan Kelas. 2 Minggu pula saya tidak berbagi ilmu bersama teman-teman saya di BLC Telkom Klaten, lapar dan rindu menjadi satu seakan sudah lama tidak berbagi ilmu yang sangat berharga meskipun terlihat sangat sepele, tetapi hal -hal seperti ini lah yang membuat kami rindu BLC Telkom Klaten.

Hari ini tanggal 30 May 2016, hari pertama saya masuk setelah UKK, kami langsung di intruksikan oleh Mbah Suro selaku pembimbing kami di BLC Telkom Klaten. Saya yang ditunjuk oleh untuk mengkoordinir teman-teman langsung menyiapkan alat yang akan digunakan untuk share materi. Kami langsung bergerak menyiapkan segala hal yang kami butuhkan.

Dimulai dari saya untuk membuka sharing hari ini, saya berbagi tentang Cara mengaktifkan Wifi yang tidak terbaca di linux, Cara mengembalikan Boot Loader yang hilang, Membuat Hosting Gratis dengan ID Hostinger dan juga pengenalan Layoutit. Kemudian dilanjutrkan oleh rekan saya dari SMKIT Ihsanul Fikri yaitu Fauzan Hamid, dan kami pun satu per satu maju kedepan untuk menyampaikan materi.

Manfaat :

1. Bisa mengevaluasi kinerja diri sendiri dan teman kerja.
2. Dapat mengetahui hal - hal baru yang sudah dilakukan oleh teman kerja.
3. Mendapatkan materi diluar bidang jurusan.
4. Mempererat komunikasi dalam lingkungan kerja.
5. Menjaga kekeluargaan.

Galeri Foto Kegiatan :

Materi K3

Keselamatan dan Kesehatan Kerja atau yang biasa di singkat dengan k3 adalah salah satu hal yang tidak bisa begitu saja kita lewatkan. K3 amat penting dalam membantu kelancaran sebuah pekerjaan, tanpa K3 para pekerja juga akan merasa cemas akan keselamatan dan juga kesehatannya. Tentu untu K3 kita harus memahami betul apa sih yang dimaksud dengan K3 dan apa sih tujuan dari K3.

Apa itu K3

     Kesehatan dan keselamatan kerja (K3) adalah bidang yang terkait dengan kesehatan, keselamatan, dan kesejahteraan manusia yang bekerja di sebuah institusi maupun lokasi proyek. Tujuan K3 adalah untuk memelihara kesehatan dan keselamatan lingkungan kerja. K3 juga melindungi rekan kerja, keluarga pekerja, konsumen, dan orang lain yang juga mungkin terpengaruh kondisi lingkungan kerja.

     Kesehatan dan keselamatan kerja cukup penting bagi moral, legalitas, dan finansial. Semua organisasi memiliki kewajiban untuk memastikan bahwa pekerja dan orang lain yang terlibat tetap berada dalam kondisi aman sepanjang waktu. Praktek K3 (keselamatan kesehatan kerja) meliputi pencegahan, pemberian sanksi, dan kompensasi, juga penyembuhan luka dan perawatan untuk pekerja dan menyediakan perawatan kesehatan dan cuti sakit. K3 terkait dengan ilmu kesehatan kerja, teknik keselamatan, teknik industri, kimia, fisika kesehatan, psikologi organisasi dan industri, ergonomika, dan psikologi kesehatan kerja.

Dasar Hukum K3 

Penerapan K3 (Keselamatan dan Kesehatan Kerja) memiliki beberapa dasar hukum pelaksanaan. Di antaranya ialah Undang-Undang No 1 Tahun 1970 tentang Keselamatan Kerja, Permenaker No 5 Tahun 1996 tentang Sistem Manajemen Keselamatan dan Kesehatan Kerja dan Permenaker No 4 Tahun 1987 tentang Panitia Pembina Keselamatan dan Kesehatan Kerja (P2K3). Rangkuman dasar-dasar hukum tersebut antara lain :

Permenaker No 5 Tahun 1996 Tentang Sistem Manajemen K3 :

Setiap perusahaan yang memperkerjakan 100 (seratus) tenaga kerja atau lebih dan atau yang mengandung potensi bahaya yang ditimbulkan oleh karakteristik proses atau bahan produksi yang dapat mengakibatkan kecelakaan kerja seperti peledakan, kebakaran, pencemaran lingkungan dan penyakit akibat kerja (PAK).

Permenaker No 4 Tahun 1987 Tentang Panitia Pembina Keselamatan dan Kesehatan Kerja (P2K3) :

1. Tempat kerja dimana pengusaha atau pengurus memperkerjakan 100 (seratus) orang atau lebih.
2. Tempat kerja dimana pengusaha memperkerjakan kurang dari 100 (seratus) orang tetapi menggunakan bahan, proses dan instalasi yang memiliki resiko besar akan terjadinya peledakan, kebakaran, keracunan dan pencemaran radioaktif.

Tujuan K3 :

1. Melindungi dan menjamin keselamatan setiap tenaga kerja dan orang lain di tempat kerja.
2. Meminimalisir kecelakaan kerja.
3. Menjamin setiap sumber produksi dapat digunakan secara aman dan efisien.
4. Meningkatkan kesejahteraan dan produktivitas Nasional.

Referensi :

1. Wikipedia K3
2. Ahli K3

Kesimpulan :

     Dalam dunia kerja kita tidak hanya fokus pada target yang kita capai dan melupakan keselamatan dan kesehatan kerja. Kita juga harus mengimbanginya dengan bijak agar target yang kita inginkan tercapai dan juga kita selamat dan sehat dalam dunia kerja. Jangan lalai akan keselamatan dan kesehatan karena hal ini tidak ternilai harganya.

Semoga Bermanfaat !!!

Membuat CRUD Sederhana dengan AJAX ( Bagian 5 )

Bagaimana? apakah sudah mulai tertantang? Apakah banyak error? tentu itu adalah hal pasti dan akan sering kita jumpai saat kita mencoba hal baru apa lagi dengan bermain dengan AJAX. Untuk yang sudah mengikuti dari awal pasti anda sudah mengetahui apa permasalahan yang akan kita selesaikan bersama di bagian ini.

Di bagian sebelumnya kita memang sudah bisa menghapus data yang sudah kita buat, tetapi jika kita mencoba menambahkan data maka yang akan muncul hanya textnya saja tanpa tombol hapusnya. Disini saya akan belajar menyelesaikan masalah ini bersama - sama dengan teman - teman. 

Tahapan :

1. Kita coba masukan data terlebih dahulu agar kita bisa mengetahui masalahnya.
   
   •  Jika kita perhatikan di inspect element, data yang baru kita masukan belum mendapat id, dan inilah masalah utamanya.
2. Sekarang kita buka aksi.php. Edit scriptnya seperti ini.
   
    Ini hasilnya:
   
   
   
3. Karena kita sudah menambahkan idnya, sekarang kita masukan tombol submitnya.
   
4. Setelah itu kita masukan data kembali, dan lihat hasilnya.
   
   •  Perhatikan tanda, id dan tombol sudah muncul.
5. Tetapi jangan senang terlebih dahulu, karena kita belum bisa menghapus data yang kita buat. Atasi dengan mengedit script type hapus menjadi seperti ini
   
6. Sebenarnya sampai disini juga sudah selesai, tetapi jika kita lihat lebih jauh, saat kita mengirim atau memasukan data maka text yang ada di text area tidak ikut menghilang. Untuk merapikannya masukan script ini.
   
7. Ini lah hasilnya.
   

Error sudah kita atasi bersama, dibagian selanjutnya adalah bagian terakhir dan dibagian ini pula yang paling rumit. Jika anda masih mempunya error di bagian sebelumnya, alangkah lebih baiknya jika anda selesaikan terlebih dahulu.

Selamat Mencoba !!!

Membuat CRUD Sederhana dengan AJAX ( Bagian 4 )

Membuat Database sudah, membuat koneksi sudah, menambahkan data sudah, memunculkan data juga sudah, kalau menghapusnya bagaimana ya?. Jangan kuatir gan, kita disini sama-sama melanjutkan apa yang sudah kita buat bersama - sama yaitu membuat CRUD dengan PHP dan kita kombinasikan dengan AJAX. Sejak kemarin anda sudah membuat tampilan awalnya, data basenya dan juga sudah bisa menambahkan dan memunculkan data yang sudah kita buat.

Sekarang kita akan belajar bagaimana cara menghapus data tanpa merefresh halamannya, saya mendapat banyak sekali masukan dari senior saya di BLC Telkom Klaten yaitu mas Aji Kamaludin, tentu masih mengenai AJAX dan salah satunya akan saya bagikan dibagian ini. 

Alat dan bahan tetap jangan lupa ya gan, selain sangat membantu alat dan bahan kita juga sangat berguna untuk kelancaran belajar kita. Untuk yang baru bergabung bisa disiapkan terlebih dahulu alat dan bahannya/

• Laptop ( Pastikan sudah terinstall LAMP Server. Jika belum bisa dibuka disini ).
• Tahapan 1,2,3
• Text Editor

Tahapan :

1.  Pertama kita buka dokumen tampil.php
2. Tamabahkan script seperti di gambar.
   
   •  Maksud dari data-id adalah data atribut yang berguna untuk lebih menspesifikasi data yang kita buat
3. Kita cek di web browser dan lihat di inspect element.
   
   •  Yang saya beri tanda adalah hasil dari data atribut yang kita buat di tampil.php
4. Kita masuk ke index.php, masukan script ini di bawah script javascript yang sudah kita buat diawal.
   
   •  Untuk script yang saya beri tanda saya buat komentar terlebih dahulu untuk memeriksa apakah data yang kita pilih bisa terhapus atau tidak.
5. Setelah script sudah ditulis, masuk ke web browser dan inspect element -> console.
   
   • Perhatikan tanda yang paling bawah, itu muncul ketika kita klik tombol hapus, dan ini menandakan bahwa kita sudah bisa mengambil id dan bisa kita gunakan.
6. Kemudian kembali ke script yang kita buat komentar, kemudian kita ubah seperti ini.
   
   • Variaeble yang kita buat dimaksukan sebagai data yang kita masukan, jika kita tidak menambahka attr, maka semua data yang mempunyai class hapus akan terhapus semua.
   • attr sendiri dimaksudkan sebagai atribut data yang ingin kita hapus.
   • fadeOut berguna untuk menghilangkan data yang kita klik tanpa merefreshnya kembali.
7. Eits, jangan lari dulu dari index.php. Untuk mempermudah kerja kita, di dalam id kita beri type agar lebih mudah untuk memberi aksinya.
   
8. Sekarang kita masuk ke aksi.php. Masukan script dibawah ini.
   
   • Berbeda dengan tambah, dalam hapus kita memasukan echonya 1, itu menandakan jika kita klik tombol hapus yang mempunyai id maka data yang kita klik akan terhapus.
9. Kembali lagi ke index.php. Edit scriptnya menjadi seperti di gambar.
   
   •  data == 1 dimaksudnkan sebagai pengendali aksi yang sudah kita buat terlebih dahulu di langkah sebelumnya.

Setelah semua tahap sudah kita lakukan maka kita bisa mencobanya, dan hasilnya hapus menggunakan ajax berhasil. Selamat Mencoba !!!

Refrensi : Aji Kamaludin (facebook), (blog)

Membuat CRUD Sederhana dengan AJAX ( Bagian 3 )

Udah pada mau lanjut ni? hehehe tenang gan, kali ini saya akan langsung ke cara menampilkannya setelah kita kirim. Untuk yang baru membaca dan berminat mengikuti tutorial ini, langkah lebih baiknya jika anda membaca pengenalan dan tutorial pertama dan kedua. Kali ini kita akan sama - sama belajar untuk menampilkan secara langsung tanpa refresh data yang akan kita masukan melalui AJAX.

Untuk lanjut ke tahap ini, anda harus sudah bisa atau yang lebih baik yaitu faham dengan tutorial pertama dan kedua, meskipun untuk menampilkan data di tahap ini terbilang mudah tetapi juga membutuhkan pemahaman.

Alat dan bahan sama seperti tutorial sebelumnya

Tahapan : 

1. Pertama - tama kita buat dokument baru, beri nama "tampil.php".
2. Masukan script berikut.
   
3. Kemudian masukan script ini ke dalam div yang sudah kita buat di index.php.
   
4. Setelah itu kita masuk ke web browser dan refresh halamannya. Ini hasilnya !
   
   •  Itu ada lah tampilan data yang sudah kita masukan di tahap ke dua
5. Lalu bagaimana ajaxnya? Nah sekarang kita mulai scriptnya.
   
   •  prepend maksudnya dalah, jika kita memasukan data maka akan muncul diatas data yang sudah kita buat.
6. Langsung kita refresh dan kita coba tambahkan data, hasilnya langsung muncul tanpa kita refresh.
   

Lanjut di Tutorial Berikutnya ya Gan :D

Membuat CRUD Sederhana dengan AJAX ( Bagian 2 )

Nah, berjumpa lagi ni gan :D. Kali ini kita langsung ke Bagian kedua , sekarang kita akan belajar bagaimana cara menambahkan data yang kita masukan dan langsung terkoneksi dan terdata di database yang sudah kita siapkan sebelumnya di tutorial pertama. Untuk yang baru mencoba dan baru bergabung, mampir disini dulu ya gan.

Karena ini adalah bagian kedua, kita harus lebih teliti dan juga lebih paham dengan apa yang sudah kita buat sebelumnya di bagian pertama. Untuk dibagian ini akan saya jelaskan pada bagian script AJAXnya karena mungkin sebagian dari anda belum mengerti betul apa yang dimaksudkan di script tersebut.

Alat dan bahan kita juga tidak berbeda dengan bagian pertama.

Tahapan :

1. Kita tambahkan script ini di bawah </div>
   
   • Karena disini kita meminta aksi setelah tombol submit di klik maka kita memasukan variable dengan nama id dari tombol submit (disini saya memberi nama kirim).
   • console.log jika di PHP mirip dengan die, dan jika kita semakin sering bermain menggunakan console log maka kita akan semakin terbantu dengan ini.
   • Di console.log kita akan mencoba mengambil data dari text area yang kita masukan. 
2. Kemudian kita cek di web Browser, refresh terlebih dahulu dan buka inspect, ke bagian console. Ketikan kata yang ingin kita masukan.
   
   • Jika tampak seperti di gambar itu menamdakan kita sudah bisa mengambil data yang kita masukan di text area.
3. Karena kita sudah berhasil mengambil data dari text area, sekarang kita buat seperti ini.
   
   
   • Sama seperti di langkah kedua, hanya saja kita menambahkan method, url dan juga data.
   • Perhatikan pada url, kita membuat dokumen baru bernama aksi.php dan akan kita isi lagi di langkah berikutnya.
   • di bagian data, isi_komentar dimaksudkan adalah sebagai inisaial dari variable isi 
4. Kita buat dokumen baru bernama aksi.php. Kemudian masukan script dibawah ini.
   
5. Setelah itu kita cek lagi di web browser.
   
   •  Jika kita perhatikan, ketika kita masukan kata dan kita submit, maka di bagian console tambil hasil masukan kita di aksi.php. Ini menamdakan bahwa kita sudah bisa memasukan data kita di dalam aksi.php
6. Kemudian kita ubah, sekarang kita mencoba memasukan data yang kita kirim ke database kita. berikut scriptnya PHP nya..
   
7. Kita cek lagi ke web browser.
   
8. Jika script sudah benar dan di console sudah ada text Masuk, kita lihat di database kita.
   
9. Komentar berhasil kita tambahkan !!!

Referensi : Jquery

Sampai Jumpa di Bagian Selanjutnya !!!

re