Tata letak sidebar

Fungsi tata letak memungkinkan input dan keluaran diatur secara visual dalam UI. Pemilihan tata letak yang tepat membuat aplikasi Shiny lebih menarik secara estetis, sekaligus meningkatkan pengalaman pengguna.

Pada latihan ini, Anda akan memodifikasi tata letak sebuah aplikasi Shiny yang memungkinkan pengguna mengeksplorasi popularitas nama-nama kekinian. Aplikasi akhir Anda seharusnya secara visual menyerupai berikut ini:

An app where the name selector appears in the left sidebar, while the graph appears on the right in the main panel

Latihan ini adalah bagian dari kursus

Membangun Aplikasi Web dengan Shiny di R

Lihat Kursus

Petunjuk latihan

Ubah tata letak aplikasi ini sehingga pemilih nama muncul di sidebar dan plot serta tabel muncul di sebelah kanan.

Latihan interaktif praktis

Cobalah latihan ini dengan menyelesaikan kode contoh berikut.

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

Edit dan Jalankan Kode