Ketika proses teknikal interview, kita biasanya akan diminta untuk membuat kode untuk memecahkan berbagai macam permasalahan, contohnya adalah sorting. Kali ini kita akan belajar bersama bagaimana cara menyelesaikannya

Apa Itu Sorting?

Sorting adalah sebuah metode dalam pemograman dimana kita membuat sebuah aturan langkah langkah atau algoritma untuk mengurutkan data data dari yang terkecil hingga yang terbesar atau sebaliknya.

 

Bahasa pemograman yang sering kita gunakan seperti golang, javascript, python, atau c++ biasanya sudah menyediakan fungsi khusus untuk memecahkan masalah ini, sehingga dalam ngoding sehari hari sebenarnya kita sudah ga perlu capek capek lagi menjalankan algoritma sorting ini

Namun terkadang tech interviewer juga ingin menguji bagaimana calon programmer berfikir dan mensolve masalah melalui case sorting ini. Dengan ini, akhirnya mereka bisa menyaring mana programmer dengan keahlian problem solving yang baik

 

Baca Juga: Coding Interview PHP dan MySQL: Membuat Koneksi dan Mengambil Data Dari Database

Apa kamu sudah siap bekerja sebagai software engineer? Kalo sudah harusnya kalian sudah menguasai teknik sorting ini ya, tapi kalo belum. Yuk, kita bahas algoritma ini bersama sama

Jenis Jenis Sorting

Ascending

Ascending adalah urutan data dari kecil ke besar. Kodenya bisa dilihat seperti berikut

Input:  39247

Output: 23479

 

Descending

Descending adalah mengurutkn data dari besar ke kecil

Input: 39247

Output: 97432

Kalian juga bisa melihat kode di atas lewa link repo Github dibawah

Github

 

Salah satu pertanyaan teknikal interview yang pernah saya jumpai adalah bagaimana cara menghubungkan php dengan database mysql sehingga data data yang berada di database bisa dibaca dan tampilkan pada halaman web

Kini saya akan membagikan bagaimana cara yang saya lakukan. Dimulai dari menginstal database dan menjalankan web server sehingga php bisa berjalan

Disini saya menggunakan Laragon. 

Laragon adalah web server yang unik karena sudah menyiapkan segala hal yang saya butuhkan untuk membuat aplikasi web berbasis php. Kalo kalian lebih nyaman menggunakan web server yang lain seperti XAMPP, MAMP dan lain sebagainya. Boleh boleh saja

Namun yang terpenting dari postingan ini adalah bagaimana kode bekerja dan berhasil mengakses database kita

Langkah Langkah

Koneksi Database

Pertama kita coba pahami dulu soal interview berikut ini

 

Buatlah kode untuk melakukan koneksi ke database dengan host = "localhost", user id = root, dan password = "root" dan mengambil 3 baris data dari tabel lalu urutkan berdasarkan field "PRICE" (atau harga)

Saya cenderung lebih suka membungkus kode saya di dalam function, jadi jangan kaget kalo kode yang saya tulis berbeda dengan kode kode yang bertebaran di blog lain

Baik, saatnya menjawab pertanyaan diatas, pertama kalian bisa menuliskan kode seperti berikut

 

Kode ini baru berfungsi untuk membuat koneksi antar web yang ditulis menggunakan php dengan mysql. 

Kalo benar benar sudah terhubung, maka halaman web kita akan muncul tulisan seperti berikut
 

Sekarang aplikasi php kita sudah terhubung

Ambil 3 Baris Data

Masukkan kode berikut

    $sql = "SELECT * FROM movies LIMIT 4";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {
          echo "id: " . $row["KODE"]. ": " . $row["name"]. " " . $row["price"]. "<br>";
        }
      } else {
        echo "0 results";
      }

Sehingga kode kita akan terlihat seperti ini

Maka kode ini akan memunculkan data seperti ini

Urutkan berdasarkan harga atau PRICE

Setelah itu kita akan mengurutkan data ini berdasarkan harga dari kecil ke besar. Kalian hanya harus mengubah SQL query di dalam variabel $sql menjadi

SELECT * FROM movies ORDER BY price ASC LIMIT 3

 

 Maka hasilnya akan menjadi seperti berikut

Kalian bisa mengakses kode diatas secara full lewat repository dibawah

Github

 

Kita akan belajar bagaimana membuat pagination pada laravel livewire secara otomatis. Namun sebelumnya pastikan kalian sudah mengikuti tutorial sebelumnya tentang bagaimana cara membuat aplikasi web menggunakan Laravel Livewire

Baca Juga: Cara Instal Laravel Livewire

Latar Belakang

Ketika kalian membangun sebuah aplikasi tentu tidak semua data ditampilkan begitu saja di halaman utama. Hanya segelintir saja, namun ketika user ingin melihat data yang lebih banyak. Kita akan menyediakan tombol untuk melihat data data yang lain

Ini merupakan fungsi dari pagination. Sebuh fitur dimana satu halaman hanya me-load sedikit data, namun data yang lain akan disimpan pada page yang lain

Bagaimana Cara Membuatnya?

Pertama, masukkan perintah berikut

 

use WithPagination

yang diimport dari folder Livewire\WithPagination

Lalu ketika ingin memasukan data ke dalam view, tambahkan method ->pagination(data yang ingin ditampilkan). Kalian bisa memasukkan bebas angka berapa saja, disini saya akan menampilkan 5 data

    public function render()
    {
        $data = User::latest()->paginate(5);
        return view('livewire.create-user', ['data' => $data]);
    }

Lalu setelah itu, tambahkn kode berikut untuk menyisipkan tombol nomor halaman

                      <div class="my-2">
                        {{$data->links('pagination::bootstrap-5')}}
                      </div>

Secara default pagination menggunakan Tailwind sebagai framework CSS. Kalo kalian menggunakan framework Bootstrap, kalian bisa menambahkan parameter seperti kode diatas.

Maka hasilnya akan menjadi seperti berikut

 

Saat kita ingin menjalankan project Laravel kita di dalam server, kita harus menginstall semua package dari composer dengan perintah composer install. Namun apa jadinya jika terdapat error berupa 'You are Composer 1 which is deprecated. You should upgrade to Composer 2'? Kali ini kita akan mencoba mengatasinya

Sebagai pendahuluan disini saya menggunakan server FTP dari Hostinger. Bisa jadi kalian menggunakan layanan hosting lain, namun memiliki error yang sama. Jadi tidak ada salahnya seumpama kalian ingin menggunakan cara ini untuk men-solve error kalian

Caranya sebenarnya sungguh sederhana. Kalian cukup memasukkan perintah berikut

composer2 install

Betul, kalian hanya butuh menambahkan angka 2 pada akhir perintah composer

 

 

Tau Dari Mana?

Jadi, sebenarnya layanan hosting saya sudah menyiapkan perintah bash tersendiri bernama composer2 di dalam folder usr/local/bin

 

Kali ini saya akan membagikan aplikasi berupa source untuk kalian yang ingin mempunyai atau menjalankan aplikasi todo list menggunakan Laravel dan Livewire

Todo List merupakan aplikasi dimana kita bisa menambahkan tulisan atau notes lalu menghapus dan mengubahnya sesuai keingingan kita. Biasanya notes notes ini berupa apa saja yang ingin kita kerjakan, selesaikan, target, dan lain sebagainya

Aplikasi ini merupakan dengan project uji coba saya untuk mengoptimalkan kemampuan saya menggunakan Livewire.

Tanpa basa basi lagi berikut link downloadnya 

Github

Preview

Kalo kalian mau belajar juga bagaimana cara mendeploynya sehingga bisa diakses oleh siapapun di internet, ikuti juga ya postingan dibawah ini!

 

Baca Juga: Cara Instal Laravel 10 di hPanel Hostinger Menggunakan SSH

 

Kali ini kita akan belajar bagaimana mendeploy aplikasi laravel kita di internet menggunakan Hostinger. Kenapa Hostinger? Karena saya udah terlanjur keracunan iklan yang kerkeliaran di youtube (termasuk Pak Sandhika Galih)

Langsung saja kita ke TKP dan pastikan kalian sudah mempunyai sourcecode yang sudah diupload di Github

Kalo kalian belum punya, kalian bisa pakai aplikasi To Do List dibawah sebagai ujib coba

Baca Juga: Download Aplikasi Todolist Menggunkan Laravel dan Livewire

Langkah Langkah

Pertama buka tab Domains di sidebar Hostinger kalian dan pilih Subdomain

Lalu buat url untuk subdomain kalian. Dengan lokasi file seperti berikut

Kita tidak akan menggunakan FTP secara GUI, namun kita akan meggunakan ssh untuk mengakses file directory dan menggunakan serangkaan command line

disini saya menggunakan ssh di powershell. Kalo kalian tidak menemukan commmand line tersebut, kalian bisa menginstall putty terlebih dahulu 

Buka sidebar di hpanel kalian dan pilih Advanced lalu klik SSH Access

SSH Access akan memberikan informasi bagaimana cara mengakses FTP menggunakan command line beserta IP, Port, username dan password yang dibutuhkan

 

Lalu kita buat database di hPanel dengan cara buka sidebar Databases lalu klik Management

Lalu Masukkan nama database yang diinginkan, beserta passwordnya

Sekarang masukkan perintah SSH Access yang sudah kita dapatkan ke dalam Poweshell. Saya sendiri menggunakan Powershell bawaan Microsoft Store. Sejauh ini, ini merupakan CMD paling lancar ketika saya gunakan untuk berbagai macam development mulai dari PHP, Python, NodeJS, hingga Docker

Ketika kalian sudah memasukkan perintah SSH Access kalian akan diminta memasukkan password

Lalu tampilan ini akan muncul

Lalu masuk ke dalam folder aplikasi kalian yang sudah dibuat. Sedangkan lokasi folder saya ada disini

Hapus folder public dengan perintah rm -rf public

Lalu disini kita akan mengclone aplikasi yang sudah berada di Github dengan perintah berikut

git clone https://github.com/yasyaindra/todolist-laravel.git .

lalu masukkan perintah composer2 install

 

Jangan lupa untuk memasukkan composer2 install ya. Karena kalo menggunakan hanya composer install biasa saja tanpa angka 2. Maka akan terjadi error seperti ini

 

Baca Juga: Cara Mengatasi 'You are Composer 1 which is deprecated. You should upgrade to Composer 2' Ketika Instal Laravel di Server

 

Jika sudah, kita ubah file .env untuk menghubungkan aplikasi kita dengan database hosting kita. Namun untuk melakukan hal itu kita harus meng-copy file .env.example menjadi file baru dengan nama .env.example

Lalu kita ubah nama database, username, dan password yang berada di dalam file .env dengan perintah nano .env

Selain itu, kita juga ubah mode APP_DEBUG menjadi false, sehingga kita tidak menjumpai debugging view yang terkadang bisa memberikan informasi bagaimana sistem kita bekerja kepada hacker (SANGAT BERBAHAYA)

 

Masukkan perintah php artisan key:generate

Lalu kita migrate untuk mengenerate tabel dan data data di dalamnya

php artisan migrate:fresh --seeder

Maka secara otomatis aplikasi kita akan terisi dengan data

Dan kita check websitenya apakah sudah berjalan dengan baik

Kalian bisa check urlnya ini: DEMO

 

Ketika membuat aplikasi pasti kita membutuhkan data masukkan untuk menguji apakah aplikasi berjalan dengn baik. Tentu kalo datanya masih sedikit, kita secara manual memasukkan lewat form/request ke dalam server. Namun, kita juga bisa memasukkannya secara manual melalui Databae Client seperti phpmyadmin, MySQL Workbench, Robo3T dan lainnya. Kali ini kita akan belajar bagaimana cara membuat factory, seeder, dan faker sehingga kita bisa mengisi database dengan lebih otomatis

Saya sendiri menjalankan seeding sering sekali untuk menguji apakah aplikasi web saya bisa berhasil me-load data dengan baik. Daripada saya ngisi data banyak banyak dan menghabiskan waktu, kenapa tidak dengan command line yang singkat data bisa terisi dengan cepat

Misal saya membutuhkan tabel berisi data data produk lengkap dengan isinya. Tabel ini berisi field nama produk, harga, gambar produk dan deskripsi. Kita membuat factornya terlebih dahulu dengan perintah berikut

php artisan make:factory ProductFactory

Perintah ini akan membuat file ProductFactory di dalam folder databases. Masukkan kode berikut

Dari kode diatas kita memiliki function fake() yang sudah otomatis terinstall di dalam Laravel. Jadi kita tidak perlu menginstal faker lagi

 

Baca Juga: Laravel Kickstart. Hal Yang Harus Disiapkan Untuk Aplikasi Web Pertama Kamu

Kalian bisa eksplor lebih jauh tentang faker() ini di dalam dokumentasinya 

 Setelah itu kita harus menjalankan factory ini di dalam file DatabaseSeeder yang berada dalam folder databases/seeders

    

 

 

Baca Juga:  Cara Instal Laravel Livewire

Kalian bisa mengganti angka 10 menjadi angka yang kalian inginkan. Ini akan mengenerate berapa jumlah yang dibutuhkan. Kalo 5 berarti akan ada 5 row data yang dibuat pada tabel secara otomatis

php artisan migrate:fresh --seed

Kalo kalian lihat di databasenya (disini saya menggunakan MySQL Workbench), kalian akan menjumpai tabel kita sudah diisi dengan data data random seperti berikut

sampul dengan logo laravel, laragon dan judul

Setiap kita ingin membuat tabel, pastinya kita membutuhkan id yang menjadi primary key pada data. Primary key ini haruslah unik dan merepresentasikan data yang kita punya. ID biasanya berbentuk nomer nomer increment yang dimulai dari angka satu dan seterusnya. Bagaimana jika kali ini kita membahas bagaimana kita menggunakan UUID alih alih menggunakan angka yang bisa ditebak

Apa Itu UUID?

UUID (Universally Unique Identifier) adalah metode untuk menghasilkan identifier (pengenal) yang unik secara universal. UUID digunakan dalam berbagai aplikasi dan sistem untuk mengidentifikasi entitas, seperti objek, dokumen, atau bahkan perangkat keras dan perangkat lunak.  

Contoh bentuk UUID

116c34de-3dcb-44bc-9511-a48242b9aaab

 

Kelebihan Menggunakan UUID

Karena UUID terdiri dari angka angka random, maka ini menjadikan data data yang direpresentasikan sulit ditebak oleh user yang jahil jika ingin memasukkan data dalam request ke server kita

Semisal saya mempunya product dengan ID 10, dengan mudahnya user akan memasukan angka ini ke url sehingga tampilan product yang bisa jadi rahasia bisa muncul. Tentu kita tidak menginginkan hal ini

Mungkin, hal ini sah sah saja seumpama data yang ditampilkan memang ditujukan untuk user seperti gambar di bawah ini

Single Product

Namun bagaimana jika yang dimasukkan adalah request ke server untuk menghapus data berdasarkan id yang mudah ditebak? Bahaya bukan. Maka dari itu kita membutuhkn UUID

Langkah Langkah

Saya asumsikan kalian sudah membuat project Laravel ya. Kalo masih bingung kalian bisa mengikuti caranya lewat postingan berikut

Baca Juga: Cara Instal Laravel 10 Di Laragon

Pertama kalian harus menginstal package lewat composer dengan perintah berikut

composer require ramsey/uuid

Lalu buat file bernama Uuids.php dalam folder App/Traits berisi kode berikut

<?php

namespace App\Traits;

use Ramsey\Uuid\Uuid;

trait Uuids
{ 

     /**
     * Boot function from Laravel.
     */
    protected static function boot()
    {
        parent::boot();static::creating(function ($model) {
            if (empty($model->{$model->getKeyName()})) {
                $model->{$model->getKeyName()} = Uuid::uuid4()->toString();
            }
        });
    }    /**
     * Get the value indicating whether the IDs are incrementing.
     *
     * @return bool
     */
    public function getIncrementing()
    {
        return false;
    }    /**
     * Get the auto-incrementing key type.
     *
     * @return string
     */
    public function getKeyType()
    {
        return 'string';
    }
} 

Fungsi Trait ini adalah untuk memberi tahu pada sistem Laravel bahwa khsus untuk field tertentu akan kita gantikan dengan value dari package yang sudah kita install

Sekarang gunakan trait ini di model yang diinginkan. Untuk kasus ini saya akan memberikan data data tabel produk menggunakan Uuid, sehingga model yang saya gunakan adalah Product

 

namespace App\Models;

use App\Traits\Uuids;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Product extends Model
{
    use HasFactory, Uuids;
    ....

}

Lalu kita ubah file migration product untuk field ID. Caranya 

Ganti kode ini

$table->id()

Menjadi seperti ini

$table->uuid('id')->primary()

Lalu kita migrate dengan perintah berikut

php artisan migrate

Jika kalian sudah mensetting factory untuk model kalian, kalian bisa memasukkan perintah berikut untuk mengisi dummy data dalam database secara otomatis

php artisan migrate:fresh --seed

Kita lihat

 

 

 

Kali ini kita akan melanjutkan seri belajar Laravel Livewire, yaitu bagaimana cara menggunakan data binding. Biasanya konsep ini sering sekali digunakan ketika kita belajar AlpineJS. Laravel Livewire justru bertumpu pada teknologi AlpineJS ini. Jadi kalo mau belajar Livewire sedikit sedikit belajar juga ya tentang gimana cara AlpineJS ini bekerja

Saya harap kalian sudah mengikuti tutorial sebelumnya Cara Instal Laravel Livewire

Langkah Langkah

Pertama, buat komponen livewire dengan perintah berikut

php artisan make:livewire contact-data

contact-data bisa diganti dengan nama sesuai keingingan kalian. Kalian juga bisa menuliskannya dengan format seperti ContactData

Kedua, buka file welcome.blade.php dan isikan dengan kode berikut

@livewire akan langsung membaca file di dalam folder view/liveware

 Lalu buka file ContactData.php. Kita bisa menambahkan menambahkan property berupa variabel yang bisa dibaca oleh blade

Setelah itu kita isikan, file contact-data.blade.php dengan kode berikut, dimana kita akan menambahkan tag input dan label yang mengacu pada variabel $name

Perhatikan di sana kita menambahkan property wire:model pada tag input, dimana ini sebenarnya merupakan fitur yang lumrah dijumpai pada Livewire. Sedangkan isinya bernama name harus sesuai dengan nama variabel yang sudah kita tuliskan di ContactData

Maka hasilnya akan menjadi berikut

Ketika kita coba ubah pun di dalam form input tersebut, tulisan akan berubah secara realtime

Selain variabel dengan tipe data string seperti diatas, kita juga bisa memnbuat variabel bertipe data boolean seperti berikut

Lalu kita harus membuat input checkbox yang berisikan wire:model dan mengambil variabel bernama $command

Sekarang kita bisa mencheck dan men-uncheck input tersebut untuk memberikan tanda seru atau tidak pada tulisan hello indra