Posts

Showing posts from June, 2020

Create Read Update Delete MySQL

Image
Pada tutorial sebelumnya saya menjelaskan cara membuat database di MySQL dengan phpmyadmin. Selanjutnya kita akan belajar melakukan create, read, update, dan delete pada MySQL. Menggunakan front-end seperti phpmyadmin memang sangat membantu, namun perlu anda ketahui tidak semua bisa dilakukannya. Jika kita membahas program, maka semua harus berdasarkan perintah. Contoh simpel nya saja ketika kita menggeser kursor, yang kita lihat kursor berpindah. Namun tidak hanya sekedar itu, ada bahasa atau instruksi yang membuat kursor pindah pada posisinya. Sehingga kita harus belajar bahasa SQL dan tidak terlalu bergantung dengan frond-end seperti phpmyadmin. Apalagi untuk digunakan pada bahasa pemrograman, tentu harus menggunakan perintah SQL secara langsung. Pada tutorial kali ini kita tetap menggunakan phpmyadmin untuk sedikit memudahkan, dari pada kita harus menggunakan command line atau "CMD". Anda harus membuat database dulu seperti pada tutorial sebelumnya . Jalankan control pane

Membuat Database MySQL

Image
Hampir semua aplikasi termasuk web membutuhkan database. Database adalah tempat menyimpan data secara permanen, artinya data tidak hilang meskipun aplikasi ditutup. Banyak sekali aplikasi database management sistem dipasaran, baik berbayar maupun gratis. MySQL adalah software database management sistem yang banyak digunakan orang maupun perusahaan untuk menyimpan data. Berikut ini kelebihan dari database MySQL: Merupakan aplikasi database open source Referensi dan dokumentasi lengkap Portabel Ringan MySQL menggunakan bahasa yang sama dengan database umumnya yaitu Structure Query Language (SQL). Sehingga kita mudah beradaptasi dari software DBMS lain ke MySQL.  Kita dapat mendownload MySQL saja atau satu paket dengan software lainnya. Pada tutorial ini saya menggunakan paket XAMPP yang lengkap dengan Apache. Jika belum memiliki xampp ikuti link ini .  Langsung saja saya akan menjelaskan bagaimana me

Cara Menampilkan Gambar Preview

Image
Pernahkah anda membuat program untuk mengupload sebuah gambar ?. Jika anda pernah mencoba, umumnya elemen form yang digunakan adalah "input file". Namun input file tidak dapat menampilkan gambar yang dipilih. Hal tersebut membuat pengguna berfikir apakah gambar yang akan diuploadnya benar atau salah. Gambar preview memberikan solusi yang bagus untuk masalah tersebut. Berikut yang kita butuhkan untuk membuat gambar preview: HTML Bootstrap Jquery <!DOCTYPE html> <html> <head> <title>Gambar Preview</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div class="conta

Menggunakan Icon Font Awesome

Image
Kali ini saya akan menjelaskan cara menggunakan font awesome untuk menampilkan icon.Icon adalah gambar kecil yang biasanya digunakan untuk menu. Aplikasi baik desktop maupun web tidak terlepas dengan namanya icon. Otak manusia lebih cepat mengenal gambar atau icon daripada membaca tulisan. Icon juga dapat menjelaskan lebih banyak daripada sebuah tulisan. Oleh sebab itu, icon banyak digunakan di aplikasi agar penggunanya mudah menemukan menu ataupun yang lain. Bayangkan jika semua menu dituliskan dengan huruf-huruf atau kata, tentunya akan panjang sekali daftar menunya. Menu yang terlihat sangat banyak akan memusingkan pengguna aplikasi karena tidak menarik.  Gambar atau icon tidak dengan tiba-tiba ada dan bisa digunakan. Icon sendiri dibuat oleh orang, sehingga biasanya icon memiliki hak cipta. Font awesome sendiri adalah icon untuk web yang tersedia gratis juga berbayar. Jika anda memilih yang berbayar berarti anda telah mendukung karya seseorang. Jika anda menggunakan atau mendownloa

Pengenalan JQuery

Image
Setelah mengerti dasar javascript, maka selanjutnya anda dapat belajar jquery. Apa itu jquery? jquery adalah sebuah library atau framework javascript yang sangat popular. Jquery menyediakan fungsi-fungsi yang mudah digunakan, sehingga tidak perlu lagi membangun kode javascript dari awal. Jquery sangat terkenal dan banyak dipakai oleh pengembang plugin web. Bootstrap sendiri menggunakan jquery. Kelebihan Jquery: Mudah dipelajari Dokumentasi lengkap Banyak digunakan pengembang web Cocok untuk desain web Gratis Ditahap awal anda bisa memanfaatkan secara maksimal pada bagian web desain. Tampilan web yang baik didukung oleh CSS sedangkan responship nya dari javascript. Jquery dapat digunakan untuk menuliskan atau menghapus css tanpa reload. Jquery juga dapat membaca lebar dan tinggi layar sehingga dapat diprogram sedemikan rupa. Selain untuk desain, kita juga dapat memanfaatkan jquery untuk urusan data. Seperti mengambil nilai di form dan menempatkannya. Misal kita menginput nilai mahasiswa

Membuat Grid Kolom Fleksibel

Image
Tutorial kali ini akan membahas mengenai cara membuat posisi grid kolom fleksibel menggunakan bootstrap. Membuat grid tampil fleksibel tak ubah seperti perataan teks, namun diadopsi untuk grid. Perataan umumnya rata kiri, tengah, kanan dan justify. Sesuai dengan katanya "fleksibel" berarti tampil menyesuaikan diri dengan perangkat. Keuntungan dari membuat tampilan fleksibel adalah mempercantik tampilan disemua resolusi perangkat yang membuka, ditandai dengan jarak grid kolom menyesuaikan otomatis. Langsung saja kita membuat kodenya. #Fleksibel Tengah <!DOCTYPE html> <html> <head> <title>Fleksibel</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymo