Web

February 27, 2021

Pentingnya Desainer UI/UX Tahu Sedikit Tentang Implementasi UI/UX Pada Tahap Teknis

Beberapa hari yang lalu, bersliweran tentang desain UI/UX, karena memang saya join group UI/UX. Disana banyak sekali yang share tentang karya-karya mereka. Mulai dari yang biasa saja hingga yang bagus.

Ada beberapa problem yang saya amati yaitu kurangnya pengetahuan untuk level implementasi UI/UX pada tahap teknis. Dimana kebanyakan desain dari mereka sulit untuk diimplementasikan, dengan kata lain jika dipaksakan untuk diimplementasi maka waktu dan biaya akan terlalu tinggi.

Memang, untuk ukuran desainer tidak perlu sampai benar-benar paham secara mendalam tentang teknis, tetapi cara kerja UI/UX pada tahap implementasi perlu dipelajari, supaya hasil desain tidak terlalu liar.

Contoh beberapa component yang perlu diwaspadai adalah:

  1. Form
    Ada banyak component form yang bisa ditingkatkan secara fungsi, tetapi berhati-hati sekali, karena pada tahap implementasi akan sangat susah. Tidak jarang para developer/programmer harus memprogram ulang untuk component-component tertentu. Sebagai contoh seperti component slider
  2. Grandasi Warna
    Tentang warna ini memang dapat memberikan wow effect, tetapi jika warnanya tidak berpola, solusinya biasanya hanya 1 yaitu menggunakan format gambar seperti JPG atau PNG jika membutuhkan transparan.
Diambil dari lapa.ninja

Lihat pada bagian tengah "Design Process for Pros", dimana ada campuran warna dan transparan. Kemungkinan akan dibuat gambar dan ditempel disana. Problemnya jika menggunakan pendekatan tersebut, biasanya akan perlu penyesuaian khusus untuk fitur responsivenya.

  1. Irisan Object & Object Bertumpuk
    Object bertumpuk juga sangat susah diimplementasikan. Kadang ada sebuah object yang saling bertumpuk dan hanya terlihat 50% saja. Dalam kasus-kasus tertentu, hal ini dapat membuat bug pada beberapa device.

February 13, 2021
MySQL

Solved: Starting mysqld (via systemctl): Job for mysqld.service failed because the control process exited with error code.

Beberapa hari lalu saya mengalami kendala dalam menjalankan service mysql, saat saya menjalankan sudo service mysql restart muncul error sbb:

[crayon-6077f843496f1271416843/]

Jika kamu mengalami hal serupa mungkin kamu bisa mencoba langkah yang saya lakukan:

  1. Check file my.cnf pada folder /etc/mysql/my.cnf

Berikut adalah isi file my.cnf secara default:

[crayon-6077f843496fe426113233/]

Jika kamu menemukan baris baru setelah !includedir /etc/mysql/mysql.conf.d/ pastikan kalau kamu tahu itu untuk apa, jika tidak tahu dari mana baris itu ditambahkan, kamu bisa mencoba menghapus atau menjadikan comment dengan menambahkan tanda #

  1. Lakukan end process untuk mysql

Pertama lakukan pengecheckan proses dengan ps -aux | grep mysql, maka akan muncul seperti dibawah ini

[crayon-6077f84349703334418980/]

Pada kasus diatas proses ID nya adalah 51944. Ketikkan kill <process_id>, dalam kasus ini kill 51944.

Lalu coba lagi jalankan sudo service mysql start

  1. Jika semuanya gagal, cobalah restart server anda.

Jika ketiga cara tersebut masih gagal, maka perlu dicheck ulang lebih detail lagi seperti log pada web server, mysql, server, dll. Mungkin disana ada petunjuk yang akan membantu anda.

January 9, 2021
Cron Job

Setup Cron Job Laravel di A2 Hosting

Mungkin banyak yang sudah paham cara setup cron job di server, tetapi setiap hosting mempunyai perbedaan path URL. Bagi kamu yang mengalami hal yang sama bisa coba langkah dibawah ini:

Baca Selengkapnya...
July 1, 2020
Upload Source Code Dengan Bantuan Resync + Shell

Upload Source Code Dengan Bantuan Resync + Shell

Pernahkah kita ingin meng-upload source code ke web hosting selalu menggunakan program sejenis FTP Client ataupun langsung menggunakan cPanel? Pasti pernah donk. Setiap ada perubahan source code, selalu melakukan upload ulang.

Kali ini saya akan sharing pengalaman upload project Laravel + VueJS ke shared hosting. Problem yang sering ditemui jika menggunakan shared hosting yang murah, tidak terinstallnya npm. Padahal npm diperlukan untuk meng-compile source code VueJS, sehingga dapat berjalan dengan baik.

Baca Selengkapnya...
April 5, 2020
Laravel

Setting Laravel SMTP Email Di A2Hosting

Beberapa hari lalu saya kesulitan melakukan setup email SMTP pada Laravel di A2Hosting. Problemnya tidak ada error, tetapi email tidak sampai di inbox email yang ditujuh. Berikut kira-kira configurasi .env saya.

Baca Selengkapnya...
June 6, 2019

Menggambil(Grab) Semua Link Post Profile Instragram

Beberapa minggu kemarin, saya kesusahan ingin repost post-post saya yang lama, karena terlalu dalam, jadi scroll ke bawahnya terlalu banyak. Sering kali yang saya repost hanya post-post yang baru saja dikarenakan susahnya melihat postingan awal instagram. Muncullah sebuah ide untuk membuat script sederhana untuk mengambil semua list post sehingga nanti tinggal repost saja menggunakan app android yang ada di google play. Berikut adalah javascript untuk mengambil semua post pada profile instagram: Baca Selengkapnya...
May 23, 2019

VPN Bisa Tembus Website Yang Di Blokir? Ketahui Cara Kerja VPN!

Baru-baru ini pemerintah sedang membatasi akses social media dikarenakan massivenya berita hoax yang bertebaran di media social demi memunculkannya aksi yang lebih besar pada 22 Mei 2019. Memang agak ngeri melihat persebaran berita hoax yang disebarkan oleh orang-orang yang tidak bertanggung jawab. Saya mendukung langkah pemerintah untuk membatasi akses social media untuk sementara waktu. Dalam kasus saya, saya tidak bisa mengakses facebook, whatsapp, instagram pada desktop. Untuk mobile masih bisa, tetapi kadang gambarnya tidak keluar. Muncul fenomena install VPN di timeline facebook saya. Tetapi tahukah kamu bagaimana VPN bisa by pass filter pemerintah? Baca Selengkapnya...
February 11, 2016
Selenium

Selenium IDE: Browser Automation Testing

Sebagai web developer. Hal yang paling membosankan adalah testing. Dimana para developer harus mencoba satu per satu setiap fitur yang ada. Permasalahannya adalah saat fitur yang dikerjakan semakin banyak dan kebutuhan waktu untuk testing semakin meningkat. Waktu hanya akan terbuang pada testing saja. Belum lagi dampak(impact) yang ditimbulkan tiap kali membuat fitur baru atau memperbaiki bug dapat menyebabkan fitur lain yang kelihatannya tidak ada hubungannya menjadi error atau memunculkan bug baru. Disini saya akan memperkenalkan Selenium, sebuah software untuk mengotomatisasi testing sebuah website. Bisa dikatakan ini mirip sebuah bot yang akan selalu mengisi sebuah form dan mensubmitnya sesuai permintaan kita. Pertama kali menggunakan, selenium akan merekam semua aktifitas user. Seperti mouse klik, semua tombol keyboard, field yang diisi. Jika dirasa cukup, kamu dapat langsung mencoba menjalankannya lagi. Saya akan menunjukkan cara menggunakan Selenium menggunakan browser Firefox, karena untuk Selenium IDE hanya ada dibrowser Firefox.
  1. Buka Firefox
  2. Install plugin Selenium IDE
  3. Restart Firefox
  4. Cari Selenium IDE ke Tools > Selenium IDE
  5. Maka akan muncul windows seperti dibawah ini: [caption id="" align="aligncenter" width="674"]Selenium IDE Selenium IDE[/caption] Base URL: Link utama diaman dapat diubah-ubah sesuai yang diinginkan. Ini berguna saat develop web di domainA.com dan berpindah ke domainB.com. Untuk mengatasi kejadian ini, tidak perlu merekam ulang semua testing yang sudah dibuat. Tinggal ganti saja Base URL nya. Test Case: List test case yang sudah pernah direkam sebelunya. Banyak hal lain yang bisa diexplore, tetapi untuk sekarang itu dulu saja.
  6. Masuk ke google.com
  7. Tekan tombol merah kanan untuk memulai merekam semua kegiatan browsing.
  8. Lalu coba ketikkan keyword "selenium" di google dan tekan enter.
  9. Lalu lihat jendela Selenum IDE lagi. Pada tab tabel sudah terisi dengan berbagai perintah. Jika iya, berarti sudah benar.
  10. Stop dengan menekan tombol merah
  11. Lalu coba klik tombol hijau mirip symbol "play" di software musik.
  12. Jika benar, semua tindakanmu digoogle akan diulangi lagi.
Kamu juga bisa membuat test case baru dan memberi nama yang sesuai. Setelah itu test case dapat di simpan/save untuk di buka lain waktu. Semoga dengan ini bisa memperingan proses testing kamu ya. Sebenarnya banyak metode testing. Mungkin akan saya jabarkan lain waktu.
January 6, 2016

Membuat Blog Sederhana Dengan PHP – Analisa Dan Desain Sistem

Saya akan membuat sebuah blog dimana admin dapat menambahkan, mengubah, dan menghapus sebuah artikel. Adapun user yang dapat menambahkan sebuah komentar pada sebuah artikel. Dibawah ini ada sebuah Use Case Diagram.
In software and systems engineering, a use case is a list of actions or event steps, typically defining the interactions between a role (known in the Unified Modeling Language as an actor) and a system, to achieve a goal. (Wikipedia)
Use Case Diagram adalah salah satu diagram pada UML. Pada UML(Unified Model Language) sendiri terdapat banyak sekali diagaram. Masing-masing diagaram mempunyai fungisinya sendiri. Untuk Use Case sendiri gunanya adalah mendiskripsikan sebuah sistem dapat melakukan apa saja bukan bagaimana cara melakukannya. Jadi, tidak perlu menjabarkan bagaimana suatu aksi/action dapat dilakukan. Desain Sistem Dibawah ini adalah gambar use case tentang blog sederhana yang akan dibuat nanti: Baca Selengkapnya...