OMS: Choosing Template and Upload to Git

Makassar, Irsyad — Postingan akhir — akhir ini banyak banget yang unfaedah kata Kids Jaman Now. Sekarang saya memutuskan untuk melanjutkan tulisan tentang OMS atau Aplikasi Registrasi, Tutor, dan Forum pada UKM Central Computer Improvement Menggunakan Laravel. Seperti biasanya setelah melakukan analisis tahap selanjutnya adalah pemilihan template untuk front-end dan langsung saja ke Themeforest untuk mencari template. Kali ini saya memilih template Learning App — Learning Management System Template dari FrontendMatter. Templatenya yang clean, sesuai dengan case yang akan saya kembangkan da harganya pun hanya $24. Harga yang terbilang murah untuk sebuah template HTML, CSS, JavaScript yang menggunakan framework populer seperti Bootstrap, jQuery dan AngularJS.

Karena aplikasi ini saya kembangkan di beberapa komputer jadi saya memutuskan untuk menggunakan Git untuk VCSnya. Selain itu untuk memudahkan teman — teman yang tertarik dan mengikuti tutorial ini. Setelah mengunduh template yang telah saya beli, saya simpan templatenya di localhost saya dan akan saya upload ke akun Bitbucket saya. Langkah — langkahnya adalah membuat repository Git local pada folder template tersebut, membuat repository Git di Git Server pada kasus ini saya membuat di Bitbucket, dan terakhir mengupload resource atau semua file ke Git Server dari Git Local. Pada tutorial kali ini dapat menggunakan Command Prompt, PowerShell atau Git CMD. Berikut detail langkah dan penjelasan setiap sintaksnya.

Git Repository

Saya sambil menjelaskan tentang hal — hal yang berhubungan, baik dari segi teori maupun dari segi sintaks. Singkatnya repository adalah direktori pada Git. Kalau di komputer local penyebutan direktori adalah folder. Jadi ketika kita memiliki folder codingan, folder tersebut harus diinitial dulu sebagai Gi Repository agar dapat bekerja dan memanfaatkan Git.

Git Repository Local

Git repository local adalah repository git yang ada pada komputer kita. Untuk membuatnya masuk pada folder yang akan kita jadikan sebagai git. Gunakan perintah git init pada terminal dan posisi terminal ada di folder yang akan kita jadikan git.

c:\xampp\htdocs\learn>git init
Initialized empty Git repository in c:/xampp/htdocs/learn/.git/

Setelah deklarasi local repo, kita perlu menambahkan file yang akan kita upload ke server. Ada dua proses sebelum mengupload ke Git Server. Yang pertama adalah menambahkan file atau folder mana saja yang akan diupload ke server. File atau folder tersebut ditambahkan dari local ke git local. Gunakan perintah git add . jika semua file dan folder yang ada, atau git add <namafile> untuk menambahkan file spesific saja.

c:\xampp\htdocs\learn>git add .
warning: LF will be replaced by CRLF in .build/browserify.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/skins.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/swig.json.
The file will have its original line endings in your working directory.

Abaikan warning tersebut. Akan kita bahas pada artikel yang berbeda mengenai LF, CRLF dan sebagainya. Langkah kedua adalah mengupload file dan folder tersebut ke local repo. Gunakan perintah git commat -m “Initial commit” untuk commit pertama. Perintah ini harus menyertakan comment (“xxxx”) yang berfungsi untuk memberitahu programmer lain tentang apa yang sedang dikerjakan. Sebisa mungkin commentnya sangat detail agar programmer lain lebih mudah untuk mengetahui penambahan atau modifikasi pada suatu code.

c:\xampp\htdocs\learn>git commit -m "Initial commit"
[master (root-commit) a42127b] Initial commit
 1394 files changed, 97473 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 .build/browserify.json
 create mode 100644 src/skins.json
 create mode 100644 src/swig.json

Pada contoh di atas saya tidak mengkopi semua hasilnya, hanya awal dan akhir saja mengingat penghematan ukuran file artikel ini. Untuk sementara pada local hanya seperti itu saja. Selanjutnya adalah kita membuat repository pada Git Server. Asumsikan bahwa telah login pada akun Bitbucket, kalau belum login dulu.

Git Repository Server

Git repository server adalah repository yang ada pada server. Di sinilah pusat codingan dan assetnya disimpan yang akan digunakan secara bersamaan. Nantinya semua programmer akan mengunduh dan mengupload di sini. Bagi teman — teman pembaca yang belum memiliki akun Bitbucket silakan mendaftar dan login.

Membuat Repository pada Bitbucket

Berikut langkah — langkah untuk membuat repository pada bitbucket.
Halaman berhasil login pada Bitbucket.

[caption id=”attachment_344" align=”aligncenter” width=”507"]

Halaman Beranda pada Bitbucket[/caption]

Arahkan cursor ke bagian kiri halaman dan klik tanda tambah (+) dan pilih Repository.

[caption id=”attachment_346" align=”aligncenter” width=”507"]

Create new Repository[/caption]

Berikut adalah tampilan untuk membuat repository baru pada Bitbucket. Isi detailnya sesuai kebutuhan kemudian klik button Create Repository.

[caption id=”attachment_348" align=”aligncenter” width=”507"]

Halaman Detail pada pembuatan repository baru Bitbucket[/caption]

Keterangan form:

• Owner: username pemilik akun Bitbucket
• Repository Name: nama repository nantinya nama ini akan jadi bagian dari URL juga.
• Access Level: Repository tersebut apakah private atau public. Jika public maka dapat dicari orang lain meskipun tidak kita tambahkan sebagai tim atau kontributor pada project tersebut. Karena menggunakan akun gratis makan secara otomatis projectnya private.
• Include a README?: README biasanya menggunakan markdown file yang secara umum digunakan untuk memberikan deskripsi kepada programmer atau kontributor lain. Nanti kita bahas pada satu artikel khusus mengenai README.md ini. Ada tiga pilihan yaitu:
• No: README.md tidak akan dibuat dan dapat dibuat nanti bisa dari Local ataupun dari Server.
• Yes, with a template: README.md akan dibuat dengan menggunakan template standar
• Yes, with a tutorial (for beginners): README.md akan dibuat dan berisi tutorial penggunaan Git secara standar.
• Version control system: Bitbucket mendukung dua VCS yaitu Git dan Mercurial.
• Advanced setting: detail lain yang bersifat opsional.
• Description: deskripsi atau penjelasan tentang repository tersebut.
• Forking: dijelaskan pada artikel lain.
• Project management: karena git merupakan bagian dari project management maka tersedia pilihan Issue Tracking (fitur untuk mencatat issue baik itu bugs, enhancement, ataupun nice to have fitur) dan Wiki merupakan penjelasan tentang whole project, ya wikipedianya repository atau project.
• Language: bahasa yang digunakan pada code tersebut. Ada banyak pilihan tergantung bahasa yang digunakan. Jika pada Github saya biasa menambahkan .gitatributte untuk identifikasi bahasa yang digunakan
• Integrations: fitur third party yang digunakan untuk chat dengan programmer lain. Biasanya pada perusahaan menggunakan layanan lain untuk komunikasi antara programmer.

Catatan: komunikasi adalah hal utama dalam bekerja, baik untuk programmer ataupun pekerjaan lain. Dalam bidang IT biasanya perusahaan IT menggunakan suatu aplikasi khusus untuk kebutuhan komunikasi. Untuk meminimalisir penggunaan waktu yang tidak efisien biasanya perusahaan membuka block khusus aplikasi tersebut. Di Fujitsu kami menggunakan aplikasi buatan Jepang yaitu IP Messenger atau sering disebut IPM. Di BCA menggunakan Skype, karena di bank ini banyak menggunakan product Microsoft seperti core system banyak menggunakan .Net, Knowledge Management menggunakan SharePoint, dan untuk website marketing BCA menggunakan SiteCore (Framework .NET). Sedangkan di Tokio Marine masih menggunakan IBM Lotus dan Line Telpon extension.

Setelah menekan tombol Create Repository akan diarahkan (redirect) ke halaman berikut ini.

[caption id=”attachment_351" align=”aligncenter” width=”530"]

Halaman berhasil membuat repository[/caption]

Pada artikel ini saya tidak menjelaskan semua bagian tersebut. Hanya fokus pada pembuatan repository local dan integrasi ke server.

Push Code (Upload dari Local Repo ke Server Repo)

Langkah selanjutnya adalah menambahkan URL tujuan pada local repository. Hal ini bertujuan untuk menentukan bahwa git local kita yang berada pada folder c:\xampp\htdocs\learn> akan diupload pada server berURL yang kita set tadi. Ah ribet ngomongnya! Gunakan perintah git remote add <shortname> <url> untuk set URL. Untuk URLnya tinggal mengkopi pada address bar browser (https://bitbucket.org/irsyadjpratamap/template-oms).

c:\xampp\htdocs\learn>git remote add origin https://bitbucket.org/irsyadjpratamap/template-oms

Karena pada server terdapat perbedaan dengan local maka sebelum mengupload dari local repo ke server repo kita harus mendownload dari server repo ke local repo. Gunakan perintah git pull origin master — allow-unrelated-histories untuk mendownload atau istilahnya adalah pull.

c:\xampp\htdocs\learn>git pull origin master --allow-unrelated-histories
From https://bitbucket.org/irsyadjpratamap/template-oms
 * branch            master     -> FETCH_HEAD
Merge made by the 'recursive' strategy.
 README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 README.md

Setelah pull dari server ke local terakhir adalah mengupload dari local repo ke server repo atau istilahnya adalah push. Gunakan perintah git push -u origin master.

c:\xampp\htdocs\learn>git push -u origin master
Counting objects: 1545, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (1494/1494), done.
Writing objects: 100% (1545/1545), 4.41 MiB | 130.00 KiB/s, done.
Total 1545 (delta 347), reused 0 (delta 0)
To https://bitbucket.org/irsyadjpratamap/template-oms
   48ee8c5..e34a557  master -> master
Branch master set up to track remote branch master from origin.

Nah langkah di atas langkah terakhir untuk tutorial kali ini. Sekarang dapat dicek di Bitbucket perubahannya. Tidak akan menjelaskan secara detail mengenai komponen — komponen yang ada, artikel akan sangat panjang kalau dijelaskan satu — satu. Tantangan untuk membuat tutorial adalah membutuhkan waktu yang cukup panjang karena harus menggunakan beberapa tools dan proses. Tidak berada pada satu screen. Biasanya kalau menulis artikel berdasarkan opini, fakta, ataupun random though hanya pada satu screen. Sekarang untuk tutorial ini saya pindah dari halaman post di blog kemudian pindah ke command prompt untuk meguji coba, terus ke Bitbucket dan Snagit untuk screenshot. Selain itu kadang ada beberapa hal yang harus diedit jadi waktu akan digunakan untuk mengedit gambar juga.

Menulis artikel ini saya ditemani segelas kopi hitam dan dengan playlist lagu dari Matoma. Untuk music of the nightnya adalah Find Love. Gak tau kenapa suka aja dengerin lagu ini malam — malam menulis ditemani dengan lagu bergenre EDM aliran Tropical House. Memang tropical house ya saya sebut chill. Seperti tropical house lain dari Kygo dan Clean Bandit dropnya gak terlalu sangar atau berat kayak lagu — lagu Skrillex. Beda aliran sih. Interpretasi saya lagu Find Love dari Matoma ini adalah ada seseorang yang sedang jatuh cinta namun tidak terlalu mengejar orang yang dia cintai tersebut, namun jika orang yang dicintainya tersebut tidak menemukan cinta bisa datang. Romantic tropical house song kan, jadi guys, EDM itu jangan diidentikkan dengan clubbing atau dugem. Memang EDM sering digunakan di beberapa tempat dugem karena beatnya yang up cocok untuk party.Berikut petikan lirik yang paling saya suka.

So, come on, let me know
If you can’t find love
Let me know
If you can’t find love
Come on, let me know
If you can’t find love
Give it up cause you’ve got my love
So, come on, let me know
If you can’t find love
Let me know
If you can’t find love
Come on, let me know
If you can’t find love
Just give it up cause you’ve got my love