Skip to main content

Mudah Belajar VueJS Coding hingga Deploy

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.

Comments

Popular posts from this blog

Taste the beauty of Cordova

Nowdays, there is a lot of mobile SDK framework that provide developer a solutions to their life, in order to create a multi platform mobile apps. i was tried to build apps for BlackBerry and Android, and basically i got a trouble when i want to make my apps available on both platforms. To much effort!. then i found this Apache Cordova , a free and open source mobile SDK framework based on HTML, CSS and Javascript. Yeay! web is never die. The basic move is really straight forward. Install cordova by executing " npm install -g cordova " create initial app by execute command " cordova create myApp org.apache.cordova.myApp myApp " add web platform with command " cordova platform add browser " execute " cordova run browser " to launch the app if you lost in the command, it can easily shown using command " cordova help ". it will show the howto command also example on how to do some stuff. run " cordova platform "

How to upload file using Apache Common FileUpload

Following are the steps you might try... download common-fileupload at http://commons.apache.org/fileupload. create web application project on netbeans add library common-fileupload and all dependencies (common-logging, common-beanutils) Create html form with file upload input in it, don't forget to set form enctype to multipart/form-data Create a servlet Create folder "destination" in the root web Create following script to handle upload file 1: boolean isMultipart = ServletFileUpload.isMultipartContent(request); 2: if (isMultipart) { 3: try { 4: FileItemFactory factory = new DiskFileItemFactory(); 5: ServletFileUpload upload = new ServletFileUpload(factory); 6: List items = upload.parseRequest(request); 7: Iterator iter = items.iterator(); 8: String myfile = ""; 9: while (iter.hasNext()) { 10: FileItem item = (FileItem) iter.next(); 11: if (!item.isFormField(