ETS PPB Membuat Aplikasi Ticketing Bioskop

ETS PPB I

Membuat Aplikasi Ticketing TIX
Nama: Fayyadh Hafizh
NRP : 5025201164
Kelas: PPB I
Link Github: ETS PPB

Halo temen-temen semuanya! Pada kesempatan kali ini, kita akan mencoba membuat sebuah aplikasi ticketing bioskop yang bernama TIX. Aplikasi ini diimplementasikan berdasarkan hasil redesign dengan fungsi yang sama. Nantinya, aplikasi ini dapat digunakan oleh pengguna untuk memesan tiket bioskop seperti aplikasi TIX aslinya. Fitur yang diimplementasikan adalah pembelian tiket yang melewati beberapa alur, yaitu:
1. Login
2. Beranda
3. Pemilihan Tanggal dan Kursi
4. Ringkasan Order
5. Bukti dan Informasi Pembayaran Tiket

Hasil dari implementasi aplikasi dapat dilihat pada link ini.

Kode implementasi dapat dilihat dibawah ini:
  • MainActivity.kt. Bagian ini berisi navigasi dari beberapa page yang diimplementasikan dibawah sehingga semua bagian terintegrasi.
    • package com.fydhfzh.etsppb
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Surface
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.tooling.preview.Preview
    import androidx.navigation.compose.NavHost
    import androidx.navigation.compose.composable
    import androidx.navigation.compose.rememberNavController
    import com.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    ETSPPBTheme {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "login_page") {
    composable(
    route = "login_page"
    ) {
    LoginPage(
    navigateToHomePage = {
    navController.navigate("home_page")
    }
    )
    }
    composable(
    route = "home_page"
    ){
    HomePage(
    navigateToDatePick = {
    navController.navigate("date_pick_page")
    }
    )
    }
    composable(
    route = "date_pick_page"
    ){
    DatePickPage(
    navigateToOrderDetail = {
    navController.navigate("order_detail_page")
    },
    backToHomePage = {
    navController.popBackStack()
    }
    )
    }
    composable(
    route = "order_detail_page"
    ){
    OrderDetailPage(
    navigateToOrderDetail = {
    navController.navigate("invoice_page")
    },
    backToDatePick = {
    navController.popBackStack()
    }
    )
    }
    composable(
    route = "invoice_page"
    ){
    InvoicePage(
    backToHomePage = {
    navController.navigate("home_page")
    }
    )
    }
    }
    }
    }
    }
    }
    @Composable
    fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
    text = "Hello $name!",
    modifier = modifier
    )
    }
    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
    ETSPPBTheme {
    Greeting("Android")
    }
    }
    view raw MainActivity.kt hosted with ❤ by GitHub
  • LoginPage.kt. Bagian ini berisi autentikasi dan otorisasi pengguna menggunakan email dan password pengguna.
    • package com.fydhfzh.etsppb
    import androidx.compose.foundation.BorderStroke
    import androidx.compose.foundation.background
    import androidx.compose.foundation.border
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.foundation.text.BasicTextField
    import androidx.compose.foundation.text.KeyboardOptions
    import androidx.compose.material3.Button
    import androidx.compose.material3.ButtonDefaults
    import androidx.compose.material3.CenterAlignedTopAppBar
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.OutlinedTextField
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TextField
    import androidx.compose.material3.TextFieldDefaults
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.text.AnnotatedString
    import androidx.compose.ui.text.SpanStyle
    import androidx.compose.ui.text.TextStyle
    import androidx.compose.ui.text.buildAnnotatedString
    import androidx.compose.ui.text.font.FontStyle
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.text.input.KeyboardType
    import androidx.compose.ui.text.input.PasswordVisualTransformation
    import androidx.compose.ui.text.input.VisualTransformation
    import androidx.compose.ui.text.withStyle
    import androidx.compose.ui.tooling.preview.Preview
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    import androidx.core.content.ContextCompat
    import com.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun LoginPage(
    navigateToHomePage: () -> Unit
    ){
    Scaffold(
    topBar = {
    CenterAlignedTopAppBar(title = { Text(
    text = "TIX",
    color = Color.Red,
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.titleLarge)
    })
    },
    bottomBar = {
    CenterAlignedTopAppBar(title = { Text(
    text = buildAnnotatedString {
    append("Butuh bantuan? Hubungi kami di ")
    withStyle(
    SpanStyle(
    color = Color.Blue
    )
    ){
    append("Layanan Pelanggan")
    }
    },
    fontSize = 10.sp
    ) })
    }
    ) {
    Column(
    modifier = Modifier
    .fillMaxSize()
    .padding(it),
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Spacer(
    modifier = Modifier
    .height(150.dp)
    )
    Text(
    text = "Log In",
    fontSize = 30.sp,
    letterSpacing = 3.sp
    )
    Spacer(
    modifier = Modifier
    .fillMaxWidth()
    .height(20.dp)
    )
    LoginField(
    navigateToHomePage = navigateToHomePage
    )
    }
    }
    }
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun LoginField(
    modifier: Modifier = Modifier,
    navigateToHomePage: () -> Unit
    ){
    var email by remember {
    mutableStateOf("")
    }
    var password by remember {
    mutableStateOf("")
    }
    Column(
    horizontalAlignment = Alignment.Start,
    modifier = modifier
    ) {
    Text(
    text = "Email",
    style = TextStyle(
    fontSize = 20.sp
    ),
    modifier = Modifier
    .height(40.dp)
    )
    TextField(
    value = email,
    onValueChange = {
    email = it
    },
    colors = TextFieldDefaults.colors(
    unfocusedContainerColor = Color.White,
    focusedContainerColor = Color.White,
    ),
    placeholder = {
    Text(
    text = "Masukkan email",
    color = Color.LightGray,
    fontSize = 20.sp
    )
    },
    singleLine = true
    )
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    Text(
    text = "Password ",
    style = TextStyle(
    fontSize = 20.sp
    ),
    modifier = Modifier
    .height(40.dp)
    )
    TextField(
    value = password,
    onValueChange = {
    password = it
    },
    colors = TextFieldDefaults.colors(
    unfocusedContainerColor = Color.Transparent,
    focusedContainerColor = Color.White,
    ),
    placeholder = {
    Text(
    text = "Masukkan password",
    color = Color.LightGray,
    fontSize = 20.sp
    )
    },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    singleLine = true
    )
    Spacer(
    modifier = Modifier
    .height(25.dp)
    )
    Text(text = buildAnnotatedString {
    append("Lupa password? ")
    withStyle(style = SpanStyle(
    fontWeight = FontWeight.SemiBold
    )){
    append("Reset Password")
    }
    },
    fontSize = 15.sp,
    modifier = modifier
    .align(Alignment.CenterHorizontally)
    )
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    LogInButton(
    modifier = modifier
    .align(Alignment.CenterHorizontally),
    navigateToHomePage
    )
    }
    }
    @Composable
    fun LogInButton(
    modifier: Modifier = Modifier,
    navigateToHomePage: () -> Unit
    ){
    Button(
    onClick = { navigateToHomePage() },
    modifier = modifier
    .width(200.dp),
    shape = RoundedCornerShape(20),
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF5A5A))
    ) {
    Text(
    text = "Log In",
    fontSize = 20.sp
    )
    }
    }
    view raw LoginPage.kt hosted with ❤ by GitHub
  • HomePage.kt. Bagian ini berisi daftar film yang sedang tayang dan beberapa berita terkait film-film tersebut.
    • package com.fydhfzh.etsppb
    import androidx.compose.foundation.BorderStroke
    import androidx.compose.foundation.ExperimentalFoundationApi
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.background
    import androidx.compose.foundation.border
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Box
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.IntrinsicSize
    import androidx.compose.foundation.layout.PaddingValues
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.calculateStartPadding
    import androidx.compose.foundation.layout.fillMaxHeight
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.size
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.layout.wrapContentHeight
    import androidx.compose.foundation.lazy.LazyRow
    import androidx.compose.foundation.lazy.items
    import androidx.compose.foundation.pager.HorizontalPager
    import androidx.compose.foundation.pager.VerticalPager
    import androidx.compose.foundation.pager.rememberPagerState
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.foundation.text.BasicTextField
    import androidx.compose.material3.Button
    import androidx.compose.material3.ButtonDefaults
    import androidx.compose.material3.Card
    import androidx.compose.material3.CenterAlignedTopAppBar
    import androidx.compose.material3.Divider
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.OutlinedTextField
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TextField
    import androidx.compose.material3.TextFieldDefaults
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.res.stringResource
    import androidx.compose.ui.text.AnnotatedString
    import androidx.compose.ui.text.SpanStyle
    import androidx.compose.ui.text.TextStyle
    import androidx.compose.ui.text.buildAnnotatedString
    import androidx.compose.ui.text.font.FontFamily
    import androidx.compose.ui.text.font.FontStyle
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.text.withStyle
    import androidx.compose.ui.tooling.preview.Preview
    import androidx.compose.ui.unit.LayoutDirection
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    import androidx.core.content.ContextCompat
    import com.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun HomePage(
    navigateToDatePick: () -> Unit,
    ){
    Scaffold(
    topBar = {
    TopAppBar(title = { Text(
    text = "TIX",
    color = Color.Red,
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.titleLarge)
    })
    }
    ) {
    Column(
    modifier = Modifier
    .fillMaxSize()
    .padding(it)
    .padding(10.dp)
    ) {
    Text(
    text = "Sedang Tayang",
    fontWeight = FontWeight.SemiBold,
    fontSize = 20.sp
    )
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    MoviesCarousel(
    navigateToDatePick = navigateToDatePick
    )
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Divider(color = Color.LightGray, thickness = 2.dp)
    MovieNews()
    }
    }
    }
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MoviesCarousel(
    navigateToDatePick: () -> Unit
    ){
    val movies = listOf(
    painterResource(id = R.drawable.movie1),
    painterResource(id = R.drawable.movie2),
    painterResource(id = R.drawable.movie3),
    painterResource(id = R.drawable.movie4),
    painterResource(id = R.drawable.movie5),
    painterResource(id = R.drawable.movie6),
    painterResource(id = R.drawable.movie7),
    painterResource(id = R.drawable.movie8)
    )
    val moviesDescription = listOf(
    stringResource(id = R.string.movie1),
    stringResource(id = R.string.movie2),
    stringResource(id = R.string.movie3),
    stringResource(id = R.string.movie4),
    stringResource(id = R.string.movie5),
    stringResource(id = R.string.movie6),
    stringResource(id = R.string.movie7),
    stringResource(id = R.string.movie8)
    )
    LazyRow(
    horizontalArrangement = Arrangement.spacedBy(15.dp),
    ) {
    items(movies) {movie ->
    Card(
    onClick = { navigateToDatePick() },
    modifier = Modifier
    .fillMaxWidth()
    .width(180.dp)
    ) {
    Image(
    painter = movie,
    contentDescription = null,
    contentScale = ContentScale.FillBounds,
    modifier = Modifier
    .size(300.dp)
    )
    }
    }
    }
    }
    @Composable
    fun MovieNews(){
    val newsHeader = "Film A berhasil mendapatkan 10 juta tayangan dalam 2 hari"
    val news = "Menurut sutradara film A, perolehan tayangan tersebut merupakan peran penting dari semua aktor yang berperan didalamnya"
    Column {
    Text(text = "News", fontWeight = FontWeight.Bold, fontSize = 20.sp)
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Divider(
    color = Color.Black,
    modifier = Modifier
    .fillMaxHeight() //important
    .width(4.dp)
    )
    Spacer(modifier = Modifier.width(5.dp))
    Column {
    Text(text = newsHeader, fontWeight = FontWeight.Bold, fontSize = 15.sp)
    Text(text = news)
    }
    }
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Divider(
    color = Color.Black,
    modifier = Modifier
    .fillMaxHeight() //important
    .width(4.dp)
    )
    Spacer(modifier = Modifier.width(5.dp))
    Column {
    Text(text = newsHeader, fontWeight = FontWeight.Bold, fontSize = 15.sp)
    Text(text = news)
    }
    }
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Divider(
    color = Color.Black,
    modifier = Modifier
    .fillMaxHeight() //important
    .width(4.dp)
    )
    Spacer(modifier = Modifier.width(5.dp))
    Column {
    Text(text = newsHeader, fontWeight = FontWeight.Bold, fontSize = 15.sp)
    Text(text = news)
    }
    }
    }
    }
    //@Preview
    //@Composable
    //fun HomePagePreview(){
    // ETSPPBTheme {
    // HomePage()
    // }
    //}
    view raw HomePage.kt hosted with ❤ by GitHub
  • DatePickPage.kt. Bagian ini berisi jadwal dari film yang dipilih dan daftar kursi yang tersedia.
    • package com.fydhfzh.etsppb
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.background
    import androidx.compose.foundation.interaction.MutableInteractionSource
    import androidx.compose.foundation.interaction.collectIsPressedAsState
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Box
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.PaddingValues
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxHeight
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.size
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.layout.wrapContentHeight
    import androidx.compose.foundation.lazy.LazyRow
    import androidx.compose.foundation.lazy.items
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material3.Button
    import androidx.compose.material3.ButtonDefaults
    import androidx.compose.material3.CardDefaults
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.OutlinedButton
    import androidx.compose.material3.OutlinedCard
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.draw.clip
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.font.FontWeight
    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.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun DatePickPage(
    navigateToOrderDetail: () -> Unit,
    backToHomePage: () -> Unit
    ){
    Scaffold(
    topBar = {
    TopAppBar(title = { Text(
    text = "TIX",
    color = Color.Red,
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.titleLarge)
    })
    }
    ) {
    Column(
    modifier = Modifier
    .padding(it)
    ) {
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    Column(
    modifier = Modifier
    .fillMaxWidth()
    .height(200.dp)
    .background(color = Color(0xFFFF5F5F))
    ) {
    Row {
    Image(
    painter = painterResource(id = R.drawable.movie7),
    contentDescription = null,
    modifier = Modifier
    .size(200.dp))
    Column(
    verticalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
    .fillMaxWidth()
    .padding(top = 15.dp)
    ) {
    Text(text = "Star Wars: Rogue One", color = Color.White, fontSize = 15.sp)
    Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    ) {
    Column(
    verticalArrangement = Arrangement.SpaceEvenly,
    modifier = Modifier
    .height(120.dp)
    ) {
    Text(text = "Genre", color = Color.White, fontSize = 13.sp)
    Text(text = "Durasi", color = Color.White, fontSize = 13.sp)
    Text(text = "Sutradara", color = Color.White, fontSize = 13.sp)
    Text(text = "Rating Usia", color = Color.White, fontSize = 13.sp)
    }
    Column(
    verticalArrangement = Arrangement.SpaceEvenly,
    modifier = Modifier
    .fillMaxWidth()
    .padding(start = 20.dp)
    .height(120.dp)
    ) {
    Text(text = "Action", color = Color.White, fontSize = 13.sp)
    Text(text = "1 jam 50 menit", color = Color.White, fontSize = 13.sp)
    Text(text = "Gareth Edwards", color = Color.White, fontSize = 13.sp)
    Text(text = "13+", color = Color.White, fontSize = 13.sp)
    }
    }
    }
    }
    }
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    DateList()
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    SeatGrid()
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    Row(
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
    .fillMaxWidth()
    .height(30.dp)
    ) {
    Column(
    modifier = Modifier
    .background(color = Color(0xFF6B6A6A), RoundedCornerShape(20))
    .width(200.dp)
    .fillMaxHeight()
    ) {
    Text(
    text = "Layar",
    color = Color.White,
    textAlign = TextAlign.Center,
    modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight()
    .wrapContentHeight()
    )
    }
    }
    Spacer(
    modifier = Modifier
    .height(50.dp)
    )
    Row(
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
    .fillMaxWidth()
    ) {
    Button(
    onClick = { navigateToOrderDetail() },
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF5F5F)),
    shape = RoundedCornerShape(
    25, 25, 25, 25
    )
    ) {
    Text(text = "Lanjut ke Pembayaran", fontSize = 20.sp)
    }
    }
    }
    }
    }
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun DateList(){
    val dateList = listOf(
    "16 Mei",
    "17 Mei",
    "18 Mei",
    "19 Mei",
    "20 Mei",
    "21 Mei",
    "22 Mei"
    )
    Column {
    Text(text = "Jadwal", fontWeight = FontWeight.Bold)
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    LazyRow(
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    modifier = Modifier
    .fillMaxWidth()
    .height(50.dp)
    ) {
    items(dateList) {item ->
    var isClick by remember {
    mutableStateOf(false)
    }
    var cardColor = if(isClick) Color(0xFFFF5F5F) else Color.Transparent
    var textColor = if(isClick) Color.White else Color.Black
    OutlinedCard(
    onClick = { isClick = !isClick},
    modifier = Modifier
    .fillMaxHeight()
    .width(70.dp),
    colors = CardDefaults.cardColors(containerColor = cardColor)
    ) {
    Text(
    text = item,
    fontWeight = FontWeight.Bold,
    textAlign = TextAlign.Center,
    modifier = Modifier
    .fillMaxSize()
    .wrapContentHeight(),
    color = textColor
    )
    }
    }
    }
    }
    }
    @Composable
    fun SeatGrid(){
    val totalSection = 3
    Column {
    LazyRow(
    modifier = Modifier
    .padding(start = 10.dp)
    ) {
    items(totalSection) {section ->
    SeatSection(section)
    Spacer(
    modifier = Modifier
    .width(50.dp)
    )
    }
    }
    }
    }
    @Composable
    fun SeatSection(
    section: Int
    ) {
    Column {
    repeat(4){row ->
    Row (
    horizontalArrangement = Arrangement.SpaceEvenly,
    // modifier = Modifier
    // .width(100.dp)
    ){
    repeat(4) { column ->
    var isClick by remember {
    mutableStateOf(false)
    }
    var buttonColor = if(isClick) Color(0xFFFF5F5F) else Color.Transparent
    var textColor = if(isClick) Color.White else Color.Black
    OutlinedButton(
    onClick = { isClick = !isClick },
    modifier = Modifier
    .size(50.dp),
    shape = RoundedCornerShape(
    20, 20, 20, 20
    ),
    contentPadding = PaddingValues(0.dp),
    colors = ButtonDefaults.buttonColors(containerColor = buttonColor)
    ) {
    Text(
    text = "${section * 16 + 4 * row + column + 1}",
    fontSize = 20.sp,
    color = textColor
    )
    }
    }
    }
    }
    }
    }
    //@Preview
    //@Composable
    //fun DatePickPagePreview(){
    // ETSPPBTheme {
    // DatePickPage()
    // }
    //}
    view raw DatePickPage.kt hosted with ❤ by GitHub
  • OrderDetailPage.kt. Bagian ini berisi informasi terkait dengan tiket seperti jadwal, kursi, dan harga tiket yang akan dibeli.
    • package com.fydhfzh.etsppb
    import androidx.compose.foundation.BorderStroke
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.PaddingValues
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxHeight
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.size
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.layout.wrapContentHeight
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material3.Button
    import androidx.compose.material3.ButtonDefaults
    import androidx.compose.material3.Card
    import androidx.compose.material3.CardDefaults
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.draw.shadow
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.font.FontWeight
    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.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun OrderDetailPage(
    navigateToOrderDetail: () -> Unit,
    backToDatePick: () -> Unit
    ){
    Scaffold(
    topBar = {
    TopAppBar(title = { Text(
    text = "TIX",
    color = Color.Red,
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.titleLarge)
    })
    }
    ) {
    Column(
    modifier = Modifier
    .fillMaxSize()
    .padding(it)
    .padding(10.dp)
    ) {
    Card(
    border = BorderStroke(1.dp, color = Color.Black),
    colors = CardDefaults.cardColors(containerColor = Color.White),
    modifier = Modifier
    .fillMaxWidth()
    .height(500.dp)
    .shadow(
    elevation = 10.dp,
    shape = RoundedCornerShape(5.dp)
    )
    ) {
    Row(
    modifier = Modifier
    .padding(5.dp)
    ) {
    Card(
    modifier = Modifier
    .height(200.dp)
    .width(150.dp)
    ) {
    Image(
    painter = painterResource(id = R.drawable.movie7),
    contentDescription = null,
    modifier = Modifier
    .size(400.dp),
    contentScale = ContentScale.Crop
    )
    }
    Column(
    modifier = Modifier
    .padding(10.dp)
    ){
    Text(text = "Star Wars: Rogue One")
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Row(
    modifier = Modifier
    .height(120.dp)
    ) {
    Column(
    modifier = Modifier
    .fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceBetween
    ) {
    Text(text = "Tanggal", fontSize = 13.sp)
    Text(text = "Kursi", fontSize = 13.sp)
    Text(text = "Harga", fontSize = 13.sp)
    Text(text = "Biaya Layanan", fontSize = 13.sp)
    Text(text = "Total Harga", fontSize = 13.sp)
    }
    Column(
    modifier = Modifier
    .fillMaxHeight()
    .padding(start = 10.dp),
    verticalArrangement = Arrangement.SpaceBetween
    ) {
    Text(
    text = "17 Mei",
    fontSize = 13.sp,
    modifier = Modifier
    .fillMaxWidth())
    Text(text = "12",
    fontSize = 13.sp,
    modifier = Modifier
    .fillMaxWidth())
    Text(text = "Rp50.000",
    fontSize = 13.sp,
    modifier = Modifier
    .fillMaxWidth())
    Text(text = "Rp2.000",
    fontSize = 13.sp,
    modifier = Modifier
    .fillMaxWidth())
    Text(text = "Rp52.000",
    fontSize = 13.sp,
    modifier = Modifier
    .fillMaxWidth())
    }
    }
    }
    }
    Row {
    Column(
    modifier = Modifier
    .fillMaxHeight()
    .fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Image(
    painter = painterResource(id = R.drawable.iconqris),
    contentDescription = null,
    modifier = Modifier
    .width(150.dp)
    .height(50.dp))
    Spacer(
    modifier = Modifier
    .height(10.dp)
    )
    Image(
    painter = painterResource(id = R.drawable.qr),
    contentDescription = null,
    modifier = Modifier
    .size(150.dp))
    Spacer(
    modifier = Modifier
    .height(20.dp)
    )
    Button(
    onClick = { navigateToOrderDetail() },
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF5F5F)),
    shape = RoundedCornerShape(10.dp),
    contentPadding = PaddingValues(0.dp)
    ) {
    Text(
    text = "Bayar",
    color = Color.White,
    fontSize = 20.sp,
    textAlign = TextAlign.Center,
    modifier = Modifier
    .width(200.dp)
    .height(30.dp)
    .fillMaxHeight())
    }
    }
    }
    }
    }
    }
    }
    //@Preview
    //@Composable
    //fun OrderDetailPagePreview(){
    // ETSPPBTheme {
    // OrderDetailPage()
    // }
    //}
    view raw OrderDetailPage.kt hosted with ❤ by GitHub
  • InvoicePage.kt. Bagian ini berisi barcode dari tiket yang sudah dibeli dan informasi tiket.
    • package com.fydhfzh.etsppb
    import androidx.compose.foundation.BorderStroke
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.background
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Box
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.PaddingValues
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxHeight
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material3.Button
    import androidx.compose.material3.ButtonDefaults
    import androidx.compose.material3.Card
    import androidx.compose.material3.CardDefaults
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.draw.shadow
    import androidx.compose.ui.geometry.Offset
    import androidx.compose.ui.graphics.Brush
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.font.FontWeight
    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.fydhfzh.etsppb.ui.theme.ETSPPBTheme
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun InvoicePage(
    backToHomePage: () -> Unit,
    ){
    Scaffold(
    topBar = {
    TopAppBar(title = { Text(
    text = "TIX",
    color = Color.Red,
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.titleLarge)
    })
    }
    ) {
    Column(
    modifier = Modifier
    .fillMaxSize()
    .padding(it)
    .padding(10.dp)
    ){
    Card(
    border = BorderStroke(1.dp, color = Color.Black),
    colors = CardDefaults.cardColors(containerColor = Color.White),
    modifier = Modifier
    .fillMaxWidth()
    .height(500.dp)
    .shadow(
    elevation = 10.dp,
    shape = RoundedCornerShape(5.dp)
    )
    ){
    Box(modifier = Modifier
    .fillMaxSize()
    .background(
    brush = Brush.linearGradient(
    colorStops = arrayOf(
    0.5f to Color.White,
    0.2f to Color(0xFFFF5F5F),
    0.1f to Color.Red
    ),
    start = Offset(Float.POSITIVE_INFINITY, 0f),
    end = Offset(0f, Float.POSITIVE_INFINITY)
    )
    )){
    Column(
    modifier = Modifier.fillMaxSize()
    ) {
    Row(
    modifier = Modifier
    .fillMaxWidth()
    .height(300.dp)
    ) {
    Spacer(modifier = Modifier.width(200.dp))
    Column(
    modifier = Modifier
    .padding(top =20.dp),
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Text(text = "Scan Here!", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Spacer(modifier = Modifier.height(10.dp))
    Image(painter = painterResource(id = R.drawable.barcode), contentDescription = null)
    }
    }
    Row {
    Column(
    modifier = Modifier.padding(10.dp)
    ) {
    Text(text = "Star Wars: Rouge One", fontSize = 20.sp, color = Color.White, fontWeight = FontWeight.Bold)
    Row(
    modifier = Modifier
    .background(
    color = Color.White,
    shape = RoundedCornerShape(10.dp)
    )
    .padding(10.dp)
    .height(120.dp)
    ) {
    Column(
    modifier = Modifier
    .fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceBetween
    ) {
    Text(text = "Tanggal", fontSize = 13.sp)
    Text(text = "Kursi", fontSize = 13.sp)
    Text(text = "Harga", fontSize = 13.sp)
    Text(text = "Biaya Layanan", fontSize = 13.sp)
    Text(text = "Total", fontSize = 13.sp)
    }
    Column(
    modifier = Modifier
    .padding(start = 20.dp)
    .fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceBetween
    ) {
    Text(text = "17 Mei 2024", fontSize = 13.sp)
    Text(text = "12", fontSize = 13.sp)
    Text(text = "Rp50.000", fontSize = 13.sp)
    Text(text = "Rp2.000", fontSize = 13.sp)
    Text(text = "Rp52.000", fontSize = 13.sp)
    }
    }
    }
    }
    }
    }
    }
    Spacer(modifier = Modifier.height(40.dp))
    Column(
    modifier = Modifier
    .fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Button(
    onClick = { backToHomePage() },
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF5F5F)),
    shape = RoundedCornerShape(10.dp),
    // contentPadding = PaddingValues(0.dp)
    ) {
    Text(
    text = "Kembali",
    color = Color.White,
    fontSize = 20.sp,
    textAlign = TextAlign.Center,
    modifier = Modifier
    .width(200.dp)
    .height(30.dp)
    .fillMaxHeight())
    }
    }
    }
    }
    }
    //@Preview
    //@Composable
    //fun InvoicePagePreview(){
    // ETSPPBTheme {
    // InvoicePage()
    // }
    //}
    view raw InvoicePage.kt hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Gambar
 TUGAS PPB 1 Sejarah Mobile Phone dan Perkembangan Teknologinya Halo temen-temen semuanya! pada kesempatan kali ini, kita akan membahas tentang bagaimana perkembangan teknologi mobile phone dari awal penemuannya hingga perkembangan terakhir dini hari.  Pengertian Smartphone Smartphone merupakan gadget genggam elektronik yang mencakup fungsionalitas lanjutan selain melakukan panggilan telepon dan mengirim pesan teks. Hal ini menjelaskan bahwasanya smartphone memiliki kelebihan tertentu dalam memberikan pelayanan terhadap penggunanya. Misalnya saja seperti iPhone dan ponsel berbasis android yang mana dapat menjalankan aplikasi pihak ketiga dengan menyediakan fungsionalitas tanpa batas. Handphone  Pertama Pada tahun 1973, Martin Cooper dari Motorola menciptakan prototipe telepon genggam pertama yang diberi nama Motorola DynaTAC. Meskipun prototipe ini belum seperti handphone yang kita kenal saat ini, namun sudah membuka cakrawala baru dalam komunikasi jarak jauh. Selanjutnya...
Baca selengkapnya

Tugas PPB 8 Membuat Image Scroll dengan menggunakan Desain Material

    TUGAS PPB 8 Membuat Image Scroll dengan menggunakan Desain Material Nama: Fayyadh Hafizh NRP : 5025201164 Kelas: PPB I Link Github:  Tugas 8 Halo temen-temen semuanya! Pada kesempatan kali ini, kita akan mencoba membuat sebuah aplikasi yang dapat digunakan untuk melihat beberapa gambar dengan mengimplementasikan scrolling  agar gambar dapat ditampilkan secukupnya dalam satu layar. Gambar lainnya dapat dilihat dengan melakukan scrolling pada layar tersebut. Kode Implementasi Hasil
Baca selengkapnya

Tugas PPB 13 Membuat Aplikasi Musik

  TUGAS PPB 13 Membuat Aplikasi Musik Nama: Fayyadh Hafizh NRP : 5025201164 Kelas: PPB I Link Github:  Tugas 13 Halo temen-temen semuanya! Pada kesempatan kali ini, kita akan mencoba membuat sebuah aplikasi musik menggunakan framework Flutter. Aplikasi ini nantinya dapat memutar musik, melihat daftar lagu, melihat artist dan lagu-lagunya, dan masih banyak lagi. Aplikasi ini dibuat dengan mengikuti panduan dari Codelabs dengan melewati beberapa step . Untuk beberapa kode yang umum dan hasil implementasinya dapat dilihat dibawah ini. Kode Implementasi Hasil Implementasi
Baca selengkapnya