Bagaimana memulai belajar Javascript?

Sebelum saya share tentang bagaimana memulai mempelajari javascript secara praktis, kita coba pahami dulu kenapa kita harus mempelajari bahasa pemrograman ini. JavaScript adalah salah satu bahasa pemrograman web yang paling kuat dan fleksibel. Apalagi bagi anda yang ingin berkarir sebagai web-developer, kemampuan yang baik dalam menggunakan bahasa ini mutlak diperlukan. Atau para mahasiswa yang mengambil tema web dalam skripsinya jangan sampai tidak paham dengan javascript, dosen pembimbing atau dosen penguji siap meberondong pertanyaan2 ke anda.

Perangkat komputer/laptop yang anda gunakan untuk menggunakan javascript tidak membutuhkan spesifikasi yang besar, kita hanya memerlukan web browser dan text editor yang sangat ringan digunakan seperti: Notepad++, Sublime atau Atom. Klopun anda memiliki spesifikasi laptop yang gahar/super bisa menggunakan PHPStorm atau Visual Studio Code.

PHPStorm ini adalah IDE dari Jetbrains yang berbayar dan anda bisa menggunakan trial 30 hari. Atau jika anda sebagai mahasiswa dosen, atau tenaga pendidik dan memiliki email resmi dari kampus, anda bisa mendaftarkan lisensi pendidikan gratis. Saya sudah menggunakan selama 3 tahun versi free educational licenses ini, dimana setiap tahun perlu mengisi form untuk extends masa aktif. Dengan satu aktivasi tersebut kita bisa mendapatkan free produk Jetbrains yang lain, seperti: Datagrip, WebStorm, AppCode, RubyMine, dll. Untuk detail free lisensinya anda bisa menuju ke link ini. 

Jetbrains Free Educational Licenses 

Ohh maaf, jadi pembahasan Jetbrains inih 😂😁

Untuk mempelajari javascript, paling tidak anda sudah paham dengan HTML dan CSS sebagai bahasa markup dan style untuk membangun sebuah website. Javascript sangat erat berkaitan dengan HTML dan CSS. Dimana javascript ini bertugas membuat tampilan website menjadi lebih interaktif dan dinamis.

Perlu diketahui bahwa jascript ini berbeda dengan Java, tidak ada kaitan dan hubungan antara bahasa pemrograman javascript dan Java. Java merupakan bahasa pemrograman berorientasi Objek yang di kembangkan oleh Sun dan saat ini sudah diambil alih oleh Oracle. Sedangkan javascript dikembangkan oleh Brendan Eich yang saat itu bekerja untuk Netscape dimana awalnya bernama Live Script. Kemungkinan untuk alasan marketing dan popularitas, Netscape mengubah namanya menjadi Javascript.

Konsep tentang algoritma pemrograman merupakan nilai plus untuk menguasai javascript. Meskipun anda belum pernah mempelajari algoritma pemrograman anda bisa mempelajarinya bersamaan dengan belajar javascript. Modal untuk bisa menguasai javascript adalah koneksi, konsisten dan komintmen. Yaa.. anda harus mempunyai koneksi internet yang oke dan komitmen untuk meluangkan waktu mempelajarinya. 

Berikut ini tahapan untuk memulai mempelajarinya:

1. Pelajari blog di malasngoding.com tentang javascript. Artikel ini berbahasa indonesia dan cukup lengkap tahap-tahap untuk dasar teori dan best-practise javascript. Terdapat 13 bagian dan kurang lebih diperlukan waktu sekitar 10 jam untuk menyelesaikannya. Berikut alamat webnya: https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/


2. Ikuti e-course gratis di dicoding.com pada materi Web Fundamental. Disini selain mempelajari javascript, juga terdapat materi HTML dan CSS. Anda harus registrasi dulu untuk bisa bergabung di course ini. Dari pengalaman saya sebelumnya e-course dicoding ini terstruktur dalam menyusun materi dan memudahkan dalam memahami konsep pemrograman yang kita pelajari. Batas waktu menyelesaikan e-course ini adalah 30 hari, maka anda harus mengatur waktu sebaik mungkin dan konsisten menyelesaikannya. Langsung saja menuju link berikut: https://www.dicoding.com/academies/123

Menurut saya dari blog dan e-course diatas sangat efektif untuk membangun dasar skill pemrograman javascript. Selain mempelajari dari 2 materi tersebut bisa juga dicoba beberapa blog atau e-course berikut ini:

• W3Schools, https://www.w3schools.com/js/default.asp
• Learn JS, https://www.learn-js.org/
• Tutorialpoint, https://www.tutorialspoint.com/javascript/
• Petanikode, https://www.petanikode.com/tutorial/javascript/

Selamat belajar javacript yaa, semoga 1-2 bulan kedepan setelah membaca artikel ini anda bisa menguasai pemrograman javascript dan bisa bermanfaat untuk kehidupan anda atau orang-orang disekitar, hehee...

InshaAllah selanjutnya saya akan share artikel best-practise dalam mengembangkan web menggunakan javascript

Read More

Membangun REST API dengan Laravel dalam 5 menit

Beneran 5 menit bisa jadi? Serius bisa koq 😉 Hehe.. 

Saya mulai mengenal laravel setelah mendapatkan kerjaan dari salah satu vendor telekomunikasi terbesar di Indonesia untuk memaintenance sistem yang sudah ada sekitar 2 tahun yang lalu. Selain itu beberapa programmer web jaman now ga keren klo belum menggunakan laravel untuk mengembangkan web di PHP. 

Dan semester ini saya diberi amanah untuk mengajar matakuliah Hybrid Web Development, dimana mahasiswa nantinya akan membuat suatu aplikasi back-end menggunakan REST API dan front-end menggunakan javascript, dan di bagian back-end akan digunakan framework laravel untuk membangun REST API tersebut.

Laravel dengan fitur Migration dan Eloquent-nya memungkinkan kita dengan cepat membangun aplikasi berbasis web. Masalah waktu 5 menit ini sebenarnya banyak faktor yang mempengaruhi, mungkin bisa lebih cepat lagi atau malah jauh lebih lama. Saya sendiri merasakan kemudahan dan kecepatan dalam membangun aplikasi menggunakan laravel dibanding beberapa framework yang lain. Jadi 5 menit ini sebenarnya hanya kiasan saja 👌

Untuk laravel bisa didownload menggunakan composer, saat artikel ini ditulis versi laravel yang digunakan adalah 5.8.3.

Bagi yang belum tau composer, bisa menuju ke artikel ini untuk penjelasannya. Berikut perintah untuk membuat project baru laravel dengan composer. Tuliskan pada command atau terminal.

$ composer create-project laravel/laravel laravel-api --prefer-dist

Silahkan menunggu proses download file-file laravel, lama tidaknya tergantung koneksi internet anda ya.. Selanjutnya kita akan membuat file Model Mhs beserta migration-nya, silahkan dilanjutkan dengan menulis perintah ini di command atau terminal.

$ php artisan make:model Mhs -m

Pada perintah diatas, selain membuat model, kita gunakan tambahan parameter -m yang berfungsi untuk membuat file migration. Buka file migration pada direktori database/migrations/2019_04_02_22551_create_mhs_table.php, kemudian tambahkan code berikut ini pada method up():

Schema::create('mhs', function (Blueprint $table) {
 $table->bigIncrements('id');
 $table->string('nim');
 $table->string('nama');
 $table->string('email');
 $table->string('hp');
 $table->timestamps();
});

Pada tutorial ini akan digunakan 1 tabel mhs dengan field seperti pada code diatas, yaitu: id, nim, nama, email, hp. Fungsi timestamp() disini otomatis akan men-generate field created_at dan updated_at pada tabel. Selanjutnya buka file app/Mhs.php dan lengkapi code untuk model Mhs seperti dibawah ini:

class Mhs extends Model{
    protected $fillable = ['nim', 'nama', 'email', 'hp'];
}

Variabel $fillable yang digunakan diatas merupakan salah satu variabel spesial pada Eloquent di laravel yang burfungsi untuk mendaftarkan field/kolom pada tabel yang dapat digunakan untuk insert atau update data. Selain itu terdapat juga variabel $hidden, $visible, $appends, dll. Lebih detailnya bisa menuju ke artikel id-laravel.com berikut ini.

Setelah melengkapi kedua code diatas, selanjutnya jalankan perintah migrasi di command atau terminal sebagai berikut:
$ php artisan migrate

Seeding pada laravel adalah fitur untuk melakukan pengisian data pada tabel di database. Disini akan digunakan library Faker yang dapat melakukan insert ke tabel menggunakan data testing, jadi mempermudah programmer tentunya dalam melakukan pengembangan sistem.

Untuk men-generate code Seeder tersebut silahkan tuliskan perintah berikut ini di command atau terminal:

$ php artisan make:seeder MhsTableSeeder

Dari hasil execute perintah diatas akan ter-generate file di /database/seeds/MhsTableSeeder.php. Pada function run() tambahkan code berikut ini untuk melakukan insert data menggunakan Faker.

$faker = Faker::create();
 foreach(range(0,10) as $i){
  DB::table('mhs')->insert([
  'nim' => $faker->randomNumber(8),
  'nama' => $faker->name,
  'email' => $faker->email,
  'hp' => $faker->phoneNumber
 ]);
}

Untuk menjalankan proses insert data testing ke dalam tabel gunakan perintah dibawah ini pada command atau terminal

$ php artisan db:seed --class=MhsTableSeeder

Dan cek menggunakan db manager untuk memastikan bahwa data-data tersebut telah ter-create

10 data telah ditambahkan melalui seeder

Tahap selanjutnya adalah membuat file controller untuk API dan memetakan end-point dengan menggunakan route di laravel. Pertama jalankan perintah untuk membuat file controller di command atau terminal.
$ php artisan make:controller MhsController

Berikutnya buka file routes/api.php dan tambahkan code dibawah ini untuk memetakan end-pont yang akan digunakan.

Route::get('mhs', 'MhsController@index');
Route::get('mhs/{id}', 'MhsController@show');
Route::post('mhs', 'MhsController@store');
Route::put('mhs/{id}', 'MhsController@update');
Route::delete('mhs/{id}', 'MhsController@delete');

Dan terakhir, buka file app/Http/Controllers/MhsController.php. Sesuaikan dengan code berikut ini:

use Illuminate\Http\Request;
use App\Mhs;

class MhsController extends Controller
{
    public function index(){
        return Mhs::all();
    }
 
    public function show($id){
        return Mhs::find($id);
    }

    public function store(Request $request){
        return Mhs::create($request->all());
    }

    public function update(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->update($request->all());

        return $article;
    }

    public function delete(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->delete();

        return 204;
    }
}

Tahap ini telah berhasil dibuat 5 buah end-point. InshaAllah pada artikel berikutnya akan saya bahas pengujian tiap-tiap end-point menggunakan tools postman.

Selamat mencoba, Semoga bermanfaat..

Read More