UJIAN TENGAH SEMESTER

PEMROGRAMAN WEB

Disusun oleh:

Axel Ariel Muhammad

225720022

Bisnis Digital

PROGRAM STUDI BISNIS DIGITAL

FAKULTAS MANAJEMEN DAN BISNIS

UNIVERSITAS TEKNOLOGI DIGITAL INDONESIA

YOGYAKARTA

2023
A. Membuat Output yang berisi Nama, Alamat, Email, Telp, dan Photo.

1. Membuat project baru di vue js

Disini saya membuat project baru dengan nama “uts”

2. Arahkan Direktori ke file “uts”, setelah itu jalankan server dengan fungsi npm run serve.
Kita bisa membuka aplikasi di server lokal dengan http://localhost:8080/
3. Setelah itu, buka browser, dan coba jalankan file uts yang tadi kita sudah buat. Web akan
terbuka dengan template standar dari Vue.js seperti ini:

4. Dengan ini, kita bisa memodifikasi tampilan web menggunakan Visual Studio Code. Akan
tetapi kita harus membuka Visual Studio Code terlebih dahulu. Dan setelah aplikasi terbuka
maka kita harus membuka file uts.vue melalui Visual Studio Code.

- Tampilan Visual Studio Code

- Membuka Direktori untuk Mengarahkan ke File yang tadi kita sudah buat

- Maka dalam Visual Studio Code, akan muncul tampilan seperti ini, dan ini berisi tentang
Konfigurasi Web kita yang bisa kita modifikasi nantinya

5. Selanjutnya, perhatikan Helloworld.vue dan App.vue.

Helloworld.vue adalah komponen didalam Komponen Utama yaitu : App.Vue
App.vue adalah Komponen utama penyusun Web, yang didalamnya berisi
komponen-komponen lainnya

6. Dalam Komponen Helloworld.vue, kita bisa memodifikasi tampilannya seperti yang kita
inginkan, dan disini sudah terdapat template dari vue js. Saya akan menghapus beberapa hal
yang tidak dibutuhkan dan akan membuat Komponen yang berisi Nama, Alamat Email, Telp
dan Photo.
Maka saya akan memodifikasi komponen helloworld.vue seperti ini:

HTML:
Saya mengganti konten template dengan elemen-elemen yang saya perlukan. HTML
digunakan untuk menyusun struktur layout Website yang saya bangun.
<h1> adalah header yang digunakan sebagai Judul
<p> adalah page atau isi dari halaman ini.
<Img> adalah gambar yang saya gunakan dalam Web ini.

Javascript:
Saya juga memberi fungsi setiap objek dengan memberi keterangan atau data.

- Disini saya memasukan gambar, dengan cara mengimport datanya kedalam folder
asset dan memanggil kembali dengan fungsi require
CSS:
Saya menggunakan css untuk memperindah tulisan dengan font, warna dan ukuran sesuai
yang saya mau.

- Text Align: saya membuat text sejajar ke tengah dengan fungsi ini
- Margin: Saya membatasi halaman web dengan fungsi margin sebanyak 20 Pixel
- Background color: Saya memberi warna putih dengan kode Putih ke dalam
Background Color
- Font Size: Saya mengatur Font Size dengan 24px ke dalam Bagian h1 atau Header.
Hal ini bertujuan agar font header lebih besar daripada isinya. Dan pada bagian p,
saya beri ukuran 16px agar lebih kecil daripada header
- Image Size: saya membuat ketentuan maximal dengan max-width agar foto tidak
terlalu besar dan memakan tempat dalam tampilan website.
 7. Setelah memodifikasi hal-hal diatas, saya menyimpan kode-kode di Visual Studio Code
dengan ctrl + S agar tampilan di server local berubah. Dan ini adalah hasil Webnya.

B. Contoh Penggunaan Variabel dan Tipe Data

Apa itu Variabel?

Variabel adalah simbol atau nama yang digunakan untuk menyimpan data atau nilai yang menyimpan
informasi.
Contoh Variabel :
var nama = "John";
var umur = 30;

Apa itu Tipe Data?

Tipe data adalah jenis nilai yang disimpan dalam variabel.
Dalam Pemrograman Web, ada beberapa Tipe data sebagai berikut:
String: Digunakan untuk teks.
Number: Digunakan untuk Angka
Boolean: Digunakan untuk menyimpan Iya dan Tidak( true or false)

Saya akan memberikan contoh penggunaan Variabel & Tipe Data dalam Website.
1. Membuat Komponen Baru
- Saya akan melanjutkan file uts yang tadi telah saya buat, tetapi agar susunan website tetap
rapih saya akan menambahkan komponen baru dialamnya. Saya akan beri nama Komponen
tersebut Tipedata.vue

- Agar Komponen ini dapat terbaca oleh website, maka saya harus memasukannya ke dalam
komponen utama yaitu App.vue. Maka saya akan tambahkan Komponen kedalam HTML dan
Javascript dengan menggunakan fungsi import dalam HTML dan memanggil ulang
komponen Tipedata.
 2. Ketika Komponen Tipedata.vue sudah terpanggil, maka saya bisa membuat Variabel baru
dengan Tipe data yang saya inginkan.

3. Saya akan membuat data mengenai Jasa Layanan Fotografi, maka saya akan membuat HTML
terlebih dahulu berisikan data apa saya yang saya perlukan.
- Disini saya membuat Klasifikasi data berupa Nama Jasa, Deskripsi Jasa, Harga dan Status
Jasa.
- Berikut adalah HTMLnya:

Penjelasan dari kode diatas adalah:

- <template> adalah bagian template yang menggambarkan tampilan Komponen
- v-for=”jasa in daftarJasa” untuk mengulang elemen-elemen yang ada di daftar jasa.
- key=”jasa.id” adalah kunci unik untuk setiap item dalam daftar
 4. Kemudian saya menyusun Javascriptnya yang berisi sebagai berikut:

Penjelasan:
- ‘name: ‘DaftarJasaFotografi’ adalah nama dari komponen
- ‘data() adalah data komponen untuk menanggil kembali daftar jasa fotografi
- formatCurrency(value) adalah metode untuk memfotmat harga kedalam bentuk yang sesuai,
disini saya menggunakan mata uang rupiah, dan terdapat spasi ke setiap angka yang memiliki
kelipatan 3 digit, seperti Rp. 5.000.000
CSS:

Penjelasan:
- Saya memilih font header 24px agar tulisan Judul terlihat lebih besar
- Saya menggunakan font 16px pada deskripsi, status dan harga
- Saya memberi animasi Hover kedalam Komponen untuk memberikan efek animasi Hover.
Berikut adalah Tampilan Web saya:

5. Penjelasan Variabel dan tipe data pada program yang saya buat adalah sebagai berikut:

- Variabel yang saya gunakan adalah array untuk menyimpan daftar layanan jasa fotografi.
- Tipe data yang saya gunakan adalah Array of Object, dan setiap object memiliki tipe sebagai
berikut:
- ‘id : Tipe Data Number, karena berisi kode atau kunci unik
- ‘nama: Tipe data String, karena berisi teks
- ‘Deskripsi : Tipe data String, berisi teks
- ‘harga: Tipe data Number, karena berisi nominal atau angka
- ‘Status : tipe data Boolean karena memberi tahu ketersediaan dengan (True or False)