Web Development From Zero to Hero - Meet 2

Workshop Web Development Meet 2

Postingan kali ini membahas hasil dari workshop pertemuan kedua Web Development From Zero to Hero yang diadakan oleh Lug Institut Bisnis dan Informatika Stikom Surabaya. Sebelum fokus ke materi di pertemuan 2 ini, ada baiknya kalau Anda baca postingan di pertemuaan pertama web development from zero to hero.

Kalau minggu lalu di pertemuan pertama kita banyak install - install software untuk persiapan, pertemuan kedua ini kita melakukan konfigurasi Smartgit untuk remote repository dan commit hasil kerja ke repository tersebut. Pertemuan ini juga lebih mengarah ke Git - Git seperti Github, Smartgit, Git-Scm dsb.

Artikel Terkait : Pengenalan Github, Fungsi dan Cara Menggunakannya

Oke kawan - kawan Stikom Surabaya siapkan secangkir kopi dan mari menyimak hasil pembelajaran kemarin.

Remote Repository

Repository adalah lokasi yang bisa digunakan untuk menyimpan file - file dan kita bisa mengaksesnya melalui internet. Anda tahu google drive? ya semacam itu. Tapi repository yang dimaksud disini adalah tempat kita menyimpan hasil pengerjaan project - project pengembangan aplikasi yang kita buat (repository-nya) di GitHub.

Lalu apa maksud remote repository? Jadi kita bisa kelolah file - file yang sudah kita tempatkan di repository melalui software pihak ketiga yaitu Smartgit. Artinya, kita tidak perlu buka GitHub dan mengaksesnya secara langsung.

Perintah Dasar Git

Ada beberapa beberapa istilah yang harus kita tahu untuk mengelolah file - file pada repository. Berikut penjelasannya :

• Git Init : untuk membuat repository lokal
• Git Status : untuk mengetahui status dari repository lokal
• Git Add : menambah file baru pada repository yang dipilih
• Git Commit : untuk menyimpan perubahan yang dilakukan, tapi tidak ada perubahan pada remote repository
• Git Push : untuk mengirim perubahan file setelah di commit ke remote repository
• Git Branch : melihat seluruh branch yang ada pada repository
• Git Checkout : menukar branch yang aktif dengan branch yang dipilih
• Git Merge : menggabungkan branch yang aktif dengan branch yang dipilih
• Git Clone : membuat salinan repository cloud ke repository lokal

Cek SSH Key

Hal pertama yang harus dilakukan adalah cek apakah kita sudah punya SSH key untuk remote repository. Baca dan ikuti pelan - pelan, meskipun nanti ada yang error tetap ada tuntunan ke jalan yang benar kok wehehehe... 😆

1. Buka Git Bash (Windows) atau Terminal (Linux / Mac)
2. ketik perintah : ls -al ~/.ssh
3. Jika Anda sudah punya SSH Key, maka hasilnya seperti ini

Jika hasil eksekusi perintah seperti gambar diatas, itu artinya Anda sudah pernah membuat SSH key dengan kata lain, Anda sudah punya SSH Key. Jika hasil eksekusi perintah seperti ini

Itu artinya Anda belum punya SSH Key. Hmmm kasian....

Membuat SSH Key

Ayo buat dulu SSH Key nya ya, ikuti langkah ini :

1. Buka Git Bash 
2. Ketik perintah : ssh-keygen -t rsa -b 4096 -C "emailmu@example.com"
3. Ganti email itu menggunakan email Anda ya.
4. Akan muncul informasi seperti ini : Generating public/private rsa key pair
5. Saat ditanya dimana akan menyimpan key, tekan ENTER untuk menyimpan di lokasi penyimpanan defaultnya - Enter a file in which to save the key (/Users/you/.ssh/id_rsa) : [Anda tekan ENTER]
6. Saat ditanya untuk memasukkan passphrase, isi dan ingat baik - baik passwordnya lho. Enter passphrase (kosongi saja jika Anda tidak masukkan password) tapi Anda ingin memberi password, maka ketik password dan enter.
7. Jalankan perintah : ls -al ~/.ssh  dan pastikan ada tulisan id_rsa ya

Masukkan SSH Key ke Github

Setelah membuat SSH Key, sekarang masukkan SSH Key tersebut ke Github Anda.

1.Login Github Anda dan pilih menu Settings

2. Lihat bagian sidemenu di sebelah kiri. Klik SSH and GPS keys

3. Klik New SSH Key

4. Isi Title-nya, saya kemarin isi : ganfahdil

5. Isi Key-nya dengan isi dari key (file **.pub*) yang tadi sudah digenerate dilangkah sebelumnya. Jika Anda meletakkan secara default (lihat tutorial sebelumnya), maka cari isi key-nya di local disk C, lihat gambar di bawah ini

6. Klik kanan file id_rsa.pub dan buka dengan notepad. Kemudian copas isinya ke kolom key pada Github.

7. Setelah copas ssh-rsa ke Github, klik Add SSH Key dan masukkan username plus password Github jika diminta yaa.

8. Berikut hasil konfigurasi jika berhasil

Membuat Git Repository Baru

1. Buat file baru di folder htdocs dan beri nama training-web

2. Buka Smartgit, klik menu Repository kemudian pilih add or create

3. Cari folder training-web yang tadi sudah Anda buat sebelumnya.

4. klik initialize.

5. Jika sukses akan muncul repository baru di sidebar sebelah kiri Smartgit Anda.

Menyambungkan Git dengan Smartgit

1. Buka Smartgit

2. Pilih menu Remote klik Add

3. Akan ada dialog baru, Anda klik panah kecil berwarna hitam, kemudian pilih Add Hosting Provider.

4. Setelah Anda klik Add Hosting Provider tadi, akan muncul dialog baru, Anda pilih Github. Kenapa pilih Github? karena kita menggunakan Github sebagai tempat penyimpanan repository yang akan kita remote.

5. Jangan lupa centang Use SSh instead of HTTPS to access repositories. Setelah itu klik Generate API Token.

6. Setujui (Authorize) permintaan yang muncul.

7. Copy token yang diberikan oleh Github dan paste token tersebut di Smartgit Anda.

8. Klik Add.

Membuat Repository di Github

1. Login Github

2. Klik simbol + di sebelah kiri foto profil Anda.

3. Klik New Repository

4. Isi nama repository-nya sama dengan nama repo dilokal (training-web yang Anda buat di htdocs)

5. Pilih Public dan klik Create repository

6. Jika sukses, tampilannya seperti ini.

Menjalankan Github Sebagai Remote Repository

1. Buka Smartgit

2. Pastikan repository yang Anda pilih adalah training-web

3. Pilih menu Remote dan klik Add.

4. Klik simbol segitiga, pilih Github.

5. Akan ada dialog muncul, pilih training-web tadi.

6. Selanjutnya Anda bisa mengganti name origin menjad Github.

7. klik Add.

8. Jika suskes maka akan muncul seperti ini di Smartgit.

Template

1. Di dalam folder trainig-web (yang Anda buat di htdocs). Buat file baru dengan nama template.html

2. Isi kode berikut, lalu paste di dalam file template.html dan simpan.
Kode bisa dilihat disini

Commit ke Git via Smartgit

1. Buka Smartgit, pilih repository-nya yaitu training-web.

2. Lakukan commit.

3. Beri pesan : pertemuan 02-1 pada commit messages pada dialog yang muncul

4. Jika suskes, hasilnya seperti ini

Oke cukup itu dulu ya dipertemuan kali ini, tunggu hasil workshop di pertemuan berikutnya supaya Anda yang tidak sempat hadir masih tetap bisa melanjutkan materi ini. Mudah - mudah kita semua bisa mendukung Stikom menjadi Institut Berkualitas, Unggul dan Terkenal dengan selalu mengembangkan skill coding. Amin