Tugas 3 PPB

 

TUGAS 3 PPB

MEMBUAT BIRTHDAY CARD


Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 3 - Birthday Card


Pada Tugas 3 PPB kali ini, diberikan tugas mengenal lebih dalam tentang “Composable” pada Jetpack Compose. Untuk memahami konsep “Composable” lebih mendalam secara langsung, dibuat proyek sederhana yang berupa aplikasi ucapan selamat ulang tahun sederhana. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0 yang kemudian dimodifikasi. Berikut adalah langkah untuk mengerjakan projek ini.

Langkah pertama adalah membuat proyek baru pada Android Studio dan pilih proyek kosong “Empty Activity”. Kemudian, isi nama proyek, lokasi proyek, dan minimum SDK pada window “Empty Activity”. Setelah mengisi detail proyek, maka akan diarahkan langsung ke file MainActivity.kt yang merupakan file utama proyek.



Langkah selanjutnya adalah membuat fungsi HappyBirthdayText yang berisi ucapan selamat ulang tahun. Pada fungsi ini terdapat dua parameter, yaitu message yang berisi pesan ucapan selamat ulang tahun dan from yang berisi nama pengirim. Fungsi HappyBirthdayText ini dipanggil di fungsi onCreate supaya dapat ditampilkan di aplikasi. Untuk menampilkan preview aplikasi yang sudah dibuat, dapat menggunakan anotasi “Preview” yang ditulis “@Preview” dan juga membuat fungsi BirthdayCardPreview di bawahnya. Fungsi BirthdayCardPreview ini memanggil fungsi HappyBirthdayText yang argumennya dapat diisi dengan pesan ucapan dan nama pengirim. Untuk melihat preview aplikasi dapat memilih panel “Desain” di sebelah kanan atas kode sumber, sedangkan untuk melihat kode sumber sekaligus preview aplikasi dapat memilih panel “Split” di sebelah kiri panel “Desain”.



Kemudian langkah selanjutnya adalah memberikan style pada teks supaya terlihat lebih menarik. Untuk teks message, hal pertama yang dapat ditambahkan adalah properti font size dengan ukuran 100 sp (Scalable Pixel). Karena huruf-huruf pada teks message tumpeng tindih, maka dapat menambahkan properti line height dengan ukuran 120 sp. Selanjutnya, dapat digunakan properti textAlign dan mengisinya dengan TextAlign.Center untuk memposisikan teks message ke bagian tengah. Namun, karena teks message terlalu besar, ukuran font size dikecilkan menjadi 90 sp.





Selain teks message, teks form juga perlu diberikan style supaya lebih menarik. Hal pertama adalah mengatur properti font size dengan ukuran 25 sp supaya tidak terlalu besar karena hanya berisi nama pengirim. Kemudian, menambahkan properti modifier dengan memberikan padding dan memposisikannya ke ujung kanan supaya terlihat lebih tepat dan sesuai konteks nama pengirim pada ucapan selamat ulang tahun. Padding pada modifier dapat diberikan ukuran 14 dp (Density-independent Pixel), sedangkan untuk memposisikan ke ujung kanan dapat mengatur align dengan isi (alignment = Alignment.End).



Untuk melihat tampilan sementara dari aplikasi Android yang dibuat, juga dapat melakukan preview dengan menggunakan emulator dari Android Studio. Konfigurasi pertama yang harus dilakukan adalah dengan memilih menu "Device Manager" di sebelah kanan sisi Android Studio, kemudian memilih tipe device dan juga versi image Android. Setelah melakukan konfigurasi tersebut, pilih menu "Run 'app'" untuk menjalankan aplikasi. Supaya terlihat lebih menarik lagi, ditambahkan warna pada background aplikasi dan juga warna pada teks. Warna untuk background adalah magenta, warna untuk teks ucapan selamat adalah biru, dan warna nama pengirim adalah cyan.



Kemudian, agar konten lebih berisi dan menarik, ditambahkan sebuah gambar dan beberapa ikon lain. Cara untuk memuat gambar pada proyek ini, dapat dilihat melalu referensi berikut https://developer.android.com/jetpack/compose/graphics/images/loading?hl=id yang kemudian dimodifikasi.



Berikut adalah potongan kode sumber file MainActivity.kt

package com.example.happybirthdaylintang

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthdaylintang.ui.theme.HappyBirthdayLintangTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
 HappyBirthdayLintangTheme {
 // A surface container using the 'background' color from the theme
 Surface(
modifier = Modifier.fillMaxSize(),
 color = Color.Magenta
 ) {
 HappyBirthdayText(
message = "Happy Birthday Musiala!",
 from = "~From Lintang⚽⚽",
 modifier = Modifier.padding(8.dp)
)
}
 }
 }
 }
}

@Composable
fun HappyBirthdayText(message: String, from: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
 modifier = modifier.padding(8.dp)
) {
 Image(
painter = painterResource(id = R.drawable.musiala_cartoon),
 contentDescription = "Image",
 modifier = Modifier
.size(300.dp)
.align(alignment = Alignment.CenterHorizontally)
)
Text(
text = message,
 fontSize = 90.sp,
 lineHeight = 120.sp,
 textAlign = TextAlign.Center,
 color = Color.Blue
 )
Text(
text = from,
 fontSize = 25.sp,
 color = Color.Cyan,
 modifier = Modifier
.padding(14.dp)
.align(alignment = Alignment.End)
)
}
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayLintangTheme {
 HappyBirthdayText("Happy Birthday Musiala!", "~From Lintang⚽⚽")
}
}


Komentar

Posting Komentar

Postingan populer dari blog ini

Pemrograman Web Tugas 7 - Membuat Program CRUD Sederhana dengan PHP dan MySQL untuk Pendaftaran Siswa

Gambar
Muhammad Lintang Panjerino 5025201045 Pemrograman Web Kelas B Tugas 7 mata kuliah Pemrograman Web Kelas B adalah latihan membuat program pendaftaran siswa dengan menggunakan PHP dan MySQL. Website ini saya buat dengan menggunakan 8 file PHP yang terhubung dengan local database. File tersebut antara lain: config.php, index.php, list-siswa.php, form-daftar.php, proses-pendaftaran.php, form-edit.php, proses-edit.php, hapus.php . Untuk mempercantik tampilan website saya menggunakan framework Bootstrap yang terhubung melalui CDN.  Source code dari website ini terletak pada sebuah repository di akun Github saya . Link Repository Github:  https://github.com/mlintang20/pemrograman-web-tugas-7 Berikut adalah screenshot dari website tersebut: Berikut adalah potongan source code:  config.php <?php   $server = ' localhost ' ;   $user = " root " ;   $password = "" ;   $nama_database = " pendaftaran_siswa " ;   $db = mysqli_connect ($server, $user...
Baca selengkapnya

Pemrograman Web Tugas 9 - Latihan CRUD PHP + Report PDF dengan FPDF

Gambar
Muhammad Lintang Panjerino 5025201045 Pemrograman Web Kelas B Tugas 9 mata kuliah Pemrograman Web Kelas B adalah latihan membuat program CRUD dengan menggunakan PHP dan MySQL. Untuk mempercantik tampilan website saya menggunakan framework Bootstrap yang terhubung melalui CDN. Selain itu, pada saat akan menghapus data, akan tampil konfirmasi penghapusan data yang berisi nama dari siswa yang akan dihapus datanya.  Selain CRUD sederhana, pada website ini juga terdapat fitur untuk download laporan berformat PDF dengan menggunakan bantuan FPDF. Untuk dapat menghasilkan laporan PDF diperlukan beberapa langkah, yang dijelaskan di bawah.   Source code dari website ini terletak pada sebuah repository di akun Github saya . Langkah-langkah pembuatan laporan PDF: Buka situs berikut:  http://www.fpdf.org/ Pilih section Downloads di sebelah kiri halaman Download zip FPDF versi terbaru, yaitu  v1.85  (2022-11-10) Ekstrak zip ke folder program yang dikerjakan Tambahkan se...
Baca selengkapnya

Tugas 1 PPB

Gambar
TUGAS 1 PPB SEJARAH MOBILE PHONE DAN TEKNOLOGI PENDUKUNGNYA Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Sejarah Mobile Phone 1. Mobile Phone Pertama Pembuatan telepon seluler pertama kali diawali oleh kepala produk komunikasi portabel Motorola, John F. Mitchell, yang mendorong timnya untuk membuat telepon seluler pertama. Beliau berperan sangat penting dalam penemuan dan pengembangan telepon seluler. Pada tanggal 3 April 1973, insinyur Motorola, Martin Cooper, menelepon saingannya, Joel S. Engel dari Bell Labs, dari telepon seluler pertama. Di saat itulah panggilan teleopon seluler pertama di dunia dilakukan. Kemudian, Martin Cooper dan rekan-rekannya menghadiri konferensi pers dan merevolusi teknologi komunikasi. Telepon seluler yang pertama kali diciptakan oleh Motorola adalah Motorola DynaTAC 8000X. Dimensi prototipe yang digunakan untuk panggilan pertama adalah 9,1 x 5,1 x 1,8 in (23 x 13 x 4,5 cm) dengan berat sekitar 2 kg (4,4 lb) dan harus diisi dayany...
Baca selengkapnya