Showing posts with label vuejs. Show all posts

Halo gais bertemu lagi dengan saya, kali ini kita akan mencoba mulai belajar salah satu framework frontend yang lagi rame, yaitu vuejs. Untu...

Halo gais bertemu lagi dengan saya, kali ini kita akan mencoba mulai belajar salah satu framework frontend yang lagi rame, yaitu vuejs.

Untuk memulai ada beberapa poin yang harus di penuhi dulu gais. 

  1. tahu apa itu Web
  2. memahami HTML
  3. pernah menggunakan javascript atau bagus lagi pernah menggunakan JQuery
  4. tau cara menggunakan terminal/windows command prompt
  5. memiliki komputer/laptop
  6.  komputer sudah terinstall nodejs

Baiklah, pertama tama kita buat folder kerja, misal belajarvue.

Lalu buka terminal/windows command prompt kamu, dan pastikan kamu berada di dalam folder belajarvue tadi.

Mulai dengan menginstal vue cli. Pada terminal, jalankan perintah npm install -g @vue/cli. Tunggu hingga proses selesai.

Selanjutnya kita akan membuat proyek baru dengan nama petbook, jalankan perintah berikut, vue create petbookvue.


Pilih default untuk membuat aplikasi vuejs dengan standard setting. tunggu hingga proses selesai.

Jika sudah selesai, akan ada folder baru dengan nama petbookvue di dalam folder belajarvue. masuk ke folder petbookvue tersebut, lalu jalankan npm run serve, atau kalo kamu pake yarn, bisa dengan menjalankan yarn serve.

Perintah serve tadi akan menjalankan web server lokal yang bisa di akses dengan alamat http://localhost:8080.

Sekarang coba buka browser dan ketikan alamat http://localhost:8080. Akan tampil halaman depan dari vuejs seperti berikut.

 

Sesuai dengan nama aplikasi nya, petbook adalah aplikasi galeri foto dari binatang kesayangan. Langkah berikut nya buka folder petbookvue kamu dengan editor yang biasa kamu pakai, kalo saya pakai visual studio code.

 

Lalu buka file src/App.vue, dan lakukan perubahan pada file tersebut. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div id="app">
    <h1>PetBook</h1>
    <img alt="Image 1" src="https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3">
    <img alt="Image 2" src="https://images.unsplash.com/photo-1520315342629-6ea920342047">
    <img alt="Image 3" src="https://images.unsplash.com/photo-1505776777247-d26acc0e505b">
    <img alt="Image 4" src="https://images.unsplash.com/photo-1548907084-a7e5f11d229d">
    <img alt="Image 5" src="https://images.unsplash.com/photo-1596854307809-6e754c522f95">
    <img alt="Image 6" src="https://images.unsplash.com/photo-1572478465144-f5f6573e8bfd">
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Simpan lalu refresh browser kamu. Sekarang halaman kamu menampilkan 6 gambar kucing, tapi lebar gambar nya melebihi ukuran layar. Mari tambahkan sedikit css untuk membuat lebar gambar menjadi pas sesuai ukuran layar.

1
2
3
4
5
...
img {
  width: 100%;
}
...

Tambahkan css di atas sebelum tag penutup </style>, lalu coba refresh kembali browser kamu. Sekarang tampilan nya jadi sedikit lebih baik.

Selanjutnya kita akan publish web petbookvue yang sudah kita buat ke hosting gratis bernama netlify. Untuk ini kita harus simpan kode program yang dibuat ke dalam github repository. 

Buat terlebih dahulu project petbookvue di github, kemudian clone repositori nya dengan menggunakan perintah clone.

git clone <alamat repositori>

Lalu copas file dari proyek petbookvue ke folder hasil clone. Kemudian commit dan push ke github.

Step berikutnya adalah mempublish web ke netlify, cara nya sangat mudah sekali gais.

Daftar di netlify.com, pilih yang paket starter saja biar gratis. Langkah ini silakan buka netlify.com dan mulai registrasi.

Klik tombol New site from Git, untuk memulai pull kode dari github.

 Pada halaman Create a new site, klik tombol Github, yang kemudian kamu harus melakukan otentikasi menggunakan akun github.

Setelah di autentikasi selesai, akan muncul layar untuk proses instal netlify. Pada layar ini kamu cukup pilih Only select repositories, dan pilih repositori petbookvue kamu.

Layar selanjutnya, kamu akan kembali ke halaman Create a new site dengan repositori petbookvue sudah tampil, klik pada nama repositori nya.

Kemudian pada layar terakhir ini, tidak perlu ada perubahan, langsung saja klik tombol Deploy site.

Tunggu beberapa saat, dan kalo diperhatikan, netlify akan membuatkan nama situs secara acak (mungkin karena free), contoh yang saya memiliki nama heuristic-montalcini-260296, dan alamat nya diikuti dengan netlify.app. Ini contoh lengkap url saya gais https://heuristic-montalcini-260296.netlify.app/

Selamat, proyek web kamu sudah bisa di akses melalui internet!.

Ingat, web yang kita buat masih berupa halaman static, untuk membuatnya menjadi dinamis, kita membutuhkan aplikasi backend, di artikel berikutnya kita akan mencoba itu.

Sampai jumpa lagi.
Subscribe to: Posts (Atom)