Tutorial Kolaborasi Dengan Gitlab Hosting

Tutorial Kolaborasi Dengan Gitlab Hosting

1. Buka url https://about.gitlab.com/

2. Klik link Sign Up untuk mendaftar

3. Kemudian klik tab Register, terlihat seperti gambar berikut :

4. Setelah register, cek email, link konfirmasi pendaftaran terdapat pada kotak

masuk email yang digunakan untuk mendaftar.

5. Kemudian setelah diaktifasi, kemudian muncul halaman utama

6. Atau jika sudah memiliki account gitlab sebelumnya , klik menu Sign In. lalu

masukan username/email dan password yang sudah didaftarkan sebelumnya.

7. Kemudian setelah memasukan username/email dan password secara benar,

maka akan masuk ke halaman utama gitlab, dengan URL

https://gitlab.com/dashboard/projects

8. Setelah akun gitlab sudah dibuat, maka terlebih dahulu membuat folder untuk

mendownload file code project gitlab yang akan di edit

9. Jika sudah membuat file directorynya, maka selanjutnya masuk ke directory

dengan cara : 

tetsuya@tetsuya-Aspire-E1-471 / $ cd home/tetsuya/Documents/NewProject/

(disesuaikan dengan location folder yang sudah dibuat)

10. Pada bagian bawah halaman terdapat instruksi Command Line, pada head kolom
pertama terlihat pada gambar berikut :

Ini berfungsi untuk mengatur username dan email user yang akan dipakai pada

project. Sebagai identitas commit per user.

Command

config = sebagai konfigurasi

--global = sebagai parameter untuk pengaturan bahwa settingan akan dipakai

secara global

user.name = sebagai identitas username yang akan dipakai oleh user pada project

terkait project yang akan dikerjakan/ikut dalam pengerjaan project secara team.

user.email = sebagai identitas email yang akan dipakai oleh user pada project

terkait project yang akan dikerjakan/ikut dalam pengerjaan project secara team.

11.Setelah melakukan Git global setup, selanjutnya adalah proses Clone Project

dengan cara mengetikan git clone url project gitlab yang akan kita copy ke

komputer kita, seperti contoh berikut :

12.Setelah proses clone file sudah selesai maka selanjutnya masuk pada directory
company-profile-telolet, seperti contoh berikut :

13.Selanjutnya menambahkan codingan pada file index.html pada directory

company-profile-telolet, seperti pada contoh berikut :

<!-- adit -->

<!-- isi coding adit disini (feature & service) -->

<section id="feature" class="section-padding wow fadeIn delay-05s">

<div class="container">

<div class="row">

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="wrap-item text-center">

<div class="item-img">

<img src="img/ser01.png">

</div>

<h3 class="pad-bt15">Creative Concept</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="wrap-item text-center">

<div class="item-img">

<img src="img/ser02.png">

</div>

<h3 class="pad-bt15">Amazing Design</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="wrap-item text-center">

<div class="item-img">

<img src="img/ser03.png">

</div>

<h3 class="pad-bt15">Cost effective</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="wrap-item text-center">

<div class="item-img">

<img src="img/ser04.png">

</div>

<h3 class="pad-bt15">Secure</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>

</div>

</div>

</section>

<!--ini service-->

<section id="service" class="section-padding wow fadeInUp delay-05s">

<div class="container">

<div class="row">

<div class="col-md-12 text-center">

<h2 class="service-title pad-bt15">What We Do?</h2>

<p class="sub-title pad-bt15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

do eiusmod<br>tempor incididunt ut labore et dolore magna aliqua.</p>

<hr class="bottom-line">

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="service-item">

<h3><span>D</span>esign And Developement</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

<a href="">learn more...</a>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="service-item">

<h3><span>W</span>ebsite Maintenance</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

<a href="">learn more...</a>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="service-item">

<h3><span>S</span>eo Optimization</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

<a href="">learn more...</a>

</div>

</div>

<div class="col-md-3 col-sm-6 col-xs-12">

<div class="service-item">

<h3><span>D</span>igital Marketing</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

<a href="">Learn more...</a>

</div>

</div>

</div>

</div>

</section>

<!--end service-->

<!-- end adit -->

Lalu save file index.html yang sudah di edit.

14.Setelah melakukan konfigurasi sesuai yang dibutuhkan, kemudian cek status file

yang terdapat pada folder menggunakan perintah ~ git status (press enter) :

Maka akan terlihat ketika nama file yang ter tracking oleh git berwarna merah,

berarti file tersebut belum masuk kedalam staging area, seperti contoh diatas.

15.Untuk memasukan file kedalam staging area, gunakan perintah berikut :

~ git add nama_file (press enter)

Atau

~ git add . atau ~ git add *

tetsuya@tetsuya-Aspire-E1-471 ~/Documents/NewProject/company-profile-telolet $ git add .

16.Setelah di add dan nama file berubah statusnya menjadi warna hijau, selanjutnya

lakukan perintah commit, seperti perintah berikut :

git commit -m "Penambahan Section Feature and Service" (press enter)

Perintah ini akan menandai file dengan pesan yang ditulis diatas, sesuai file yang

sedang berada pada staging area yang sebelumnya file sudah di add ke dalam

staging area.

17.Kemudian proses terakhir adalah mengirim/push/upload data ke server gitlab

dengan perintah :

~ git push origin master (press enter)

Kemudian masukan username dan password yang digunakan pada gitlab tersebut.

Tunggu proses pengiriman data ke server gitlab sampai 100%. Setelah berhasil,

kita bisa cek halaman project company-profile-telolet pada gitlab yang sudah

dibuat sebelumnya dengan merefreshnya, maka akan tampil seperti gambar berikut :