## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342

## Perancangan Aplikasi Manajemen Surat Keluar Responsive Dengan Bootstrap Berbasis Web
Aditya Ramadhani, Andrean Akbar Permana, Azlam Abi Yansah, Affan Setya Fahriza, Hendry *
Fakultas Sains dan Teknologi, Sistem Komputer, Universitas Pembangunan Panca Budi, Medan, Indonesia Email: 1 ruslihmh@gmail.com, 2 andreanakbar73@gmail.com, 3 azlamabiyansahh@gmail.com, 4 affansetya13@gmail.com,
5,* hendry@dosen.pancabudi.ac.id Email Penulis Korespondensi: hendry@dosen.pancabudi.ac.id
Abstrak− Tujuan dari proyek ini adalah untuk membuat Responsive Outgoing Mail Management Application menggunakan Bootstrap untuk  Divisi  Rumah  Tangga  dan  Bappeda  dari  Medan  City.  Tujuannya  adalah  untuk  meningkatkan  produktivitas  dengan mengumpulkan, memproses, dan menggunakan data secara efisien dalam organisasi perdagangan. Selain itu, ia mencakup pemeriksaan dan penciptaan sistem informasi manajemen arsip berbasis web untuk surat masuk dan keluar di Sekretariat Kota DPRD Jambi. Sistem ini menggunakan Unified Modeling Language (UML) untuk tujuan pemodelan sistem. Selain itu, penelitian ini menekankan pentingnya menerapkan sistem arsip untuk email masuk dan keluar. Sistem ini akan dirancang menggunakan pendekatan Model View Controller (MVC),  yang  dikenal  karena  efektivitasnya  dalam  mengatur  dan  mengelola  dokumen  dalam  organisasi.  Singkatnya,  aplikasi  yang diusulkan untuk mengawasi surat keluar di Divisi Rumah Tangga dan Bappeda Medan City sejalan dengan studi sebelumnya tentang meningkatkan  efisiensi  melalui  sistem  berbasis  web  dalam  konteks  organisasi  yang  berbeda.  Dengan  mengintegrasikan  pemodelan UML dan teknik MVC, aplikasi dapat dibuat untuk mengoptimalkan prosedur email keluar secara efisien. Penelitian ini meningkatkan bidang sistem manajemen informasi dengan memberikan wawasan tentang penciptaan aplikasi web responsif yang disesuaikan untuk memenuhi tuntutan individu organisasi. Ini akhirnya meningkatkan efisiensi operasional dan praktik manajemen data.
Kata Kunci: Aplikasi Manajemen; Surat Keluar; Responsive; Bootstrap; Web Bappeda Medan
Abstract− The objective of this project is to develop a Responsive Outgoing Mail Management Application utilizing Bootstrap for the Household and Bappeda Division of Medan City. The objective is to enhance productivity by  efficiently  gathering, analyzing, and utilizing  data  inside  a  commercial  entity.  Furthermore,  he  incorporates  the  assessment  and  development  of  a  web-based  archive management information system for handling incoming and outgoing mail at the Jambi DPRD City Secretariat. The system employs Unified  Modeling  Language  (UML)  for  the  purpose  of  system  modeling.  Furthermore,  this  study  highlights  the  significance  of establishing a comprehensive archive system for both incoming and departing emails. The system will be implemented utilizing  the Model View Controller (MVC) paradigm, renowned for its efficacy in structuring and overseeing documents throughout the business. The term to summarize, the suggested application for overseeing outgoing mail in the Household Division and Bappeda Medan City aligns with prior research on enhancing effectiveness through web-based systems in various organizational settings. By combining UML modeling and MVC approaches, it is possible to develop apps that effectively streamline outgoing email processes. This research enhances the field of information  management systems by offering valuable insights into the development of responsive  web apps customized to fit the specific needs of enterprises. This subsequently enhances operational efficiency and optimizes data management processes.
Keywords : Management Application; Outgoing Mail; Responsive; Bootstrap; Web Bappeda Medan

## 1. PENDAHULUAN
Pengembangan aplikasi berbasis web untuk mengelola email keluar telah menjadi subjek minat dalam penelitian terbaru. Studi seperti yang dilakukan oleh [1] dan [2] telah berfokus pada desain sistem informasi untuk mengelola surat masuk dan  keluar  menggunakan  metode  Waterfall,  menekankan  pentingnya  sistem  terstruktur  dan  mudah  diakses  untuk manajemen  surat  yang  efisien.  Demikian  pula,  [3]  bertujuan  untuk  membuat  aplikasi  manajemen  surat  untuk memfasilitasi  pejabat  desa  dalam  menangani  korespondensi,  menekankan  kebutuhan  untuk  proses  yang  lebih  efisien dalam mengelola surat. Selain itu, penggunaan kerangka kerja spesifik seperti Bootstrap telah menjadi bagian integral dalam meningkatkan respon dan kegunaan aplikasi web untuk manajemen email. Penelitian oleh [4] menyelidiki desain tata  letak  web  responsif  menggunakan  kerangka  Bootstrap,  menekankan  adaptabilitas  aplikasi  di  berbagai  perangkat. Selain  itu,  penelitian  seperti  yang  dilakukan  oleh  [5]  tentang  implementasi  aplikasi  manajemen  surat  di  pengaturan pemerintah  lebih  menekankan  pentingnya  solusi  yang  efisien  dan  efektif  dalam  menangani  korespondensi  masuk  dan keluar dalam organisasi. Sebagai kesimpulan, lanskap penelitian yang mengelilingi pengembangan aplikasi berbasis web untuk  mengelola  email  keluar  menunjukkan  minat  yang  semakin  meningkat  dalam  menciptakan  sistem  yang  ramah pengguna dan responsif. Dengan memanfaatkan metodologi seperti Waterfall dan kerangka kerja seperti Bootstrap, para peneliti  bertujuan  untuk  meningkatkan  efisiensi  dan  aksesibilitas  proses  manajemen  surat,  memenuhi  kebutuhan organisasi dalam menangani korespondensi mereka secara efektif.
Desain  dan  pengembangan  aplikasi  web  telah  melihat  kemajuan  yang  signifikan  dengan  penggunaan  kerangka kerja  seperti  Bootstrap.  [6]  menyoroti  penggunaan  Bootstrap  dalam  menciptakan  desain  web  responsif  untuk  aplikasi rekomendasi  smartphone,  menunjukkan  versatilitas  kerangka  kerja  ini  dalam  meningkatkan  pengalaman  pengguna. Demikian  pula,  [7]  membahas  teknik  desain  web  responsif  menggunakan  Bootstrap  4,  menekankan  pentingnya menerapkan kerangka kerja tersebut untuk desain tata letak yang efisien di web[8]. Dalam bidang pengembangan sistem informasi,  metodologi  seperti  model  Waterfall  telah  menjadi  instrumen.  [9]  menerapkan  metode  Waterfall  dalam merancang  sistem  informasi  perumahan  berbasis  web,  menunjukkan  efektivitas  pendekatan  terstruktur  dalam menciptakan  sistem  fungsional.  Selain  itu,  [10]  berfokus  pada  pengembangan  sistem  manajemen  email  berbasis  web

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342
menggunakan  kerangka  kerja  CodeIgniter,  menunjukkan  pentingnya  kerangka  yang  kuat  dalam  membangun  sistem informasi  yang efisien. Selain itu, integrasi tata letak  web responsif  menggunakan Bootstrap telah menjadi tema  yang dominan dalam desain aplikasi web. [4]membahas konstruksi tata letak web responsif dengan kerangka kerja Bootstrap, menekankan perannya dalam memastikan adaptabilitas di berbagai perangkat. Penekanan ini pada responsif sesuai dengan kebutuhan aplikasi modern untuk melayani berbagai antarmuka pengguna dengan lancar. Sebagai kesimpulan, lanskap penelitian  yang  mengelilingi  desain  aplikasi  web,  terutama  dalam  konteks  sistem  manajemen  surat,  menekankan pentingnya  kerangka  kerja  seperti  Bootstrap  dan  metodologi  seperti  Waterfall.  Dengan  memanfaatkan  alat  dan pendekatan  ini,  para  peneliti  bertujuan  untuk  menciptakan  sistem  yang  ramah  pengguna,  responsif,  dan  efisien  yang memenuhi kebutuhan pengguna dalam mengelola email keluar secara efektif.
Penelitian  yang  dilakukan  oleh  [11]  tentang  merancang  dan  mengembangkan  aplikasi  web  JavaScript  portabel skala besar dalam kerangka Experiment Dashboard memperkenalkan pendekatan untuk membuat aplikasi web yang kaya fungsi dan intuitif. Dengan memanfaatkan peningkatan kinerja browser web dan ketersediaan pustaka JavaScript yang komprehensif,  penelitian  ini  mengeksplorasi  cara-cara  baru  untuk  meningkatkan  akses  pengguna,  rendering  data,  dan analisis.  Perspektif  ini  pada  pengembangan  aplikasi  web  membuka  kemungkinan  bagi  pengguna  untuk  berinteraksi dengan data dengan cara yang unik, berkontribusi pada kemajuan pengalaman pengguna di sistem berbasis web. Selain itu,  pekerjaan  [12]  tentang  pemrograman  web  dengan  FRP  multi-layer  menyajikan  integrasi  teknik  yang  ada  untuk mengatasi tantangan dalam pengembangan aplikasi web. Dengan mengusulkan solusi yang menggabungkan aplikasi web bootstrapping,  perilaku  recursive  untuk  antarmuka  web,  FRP  asynchronous,  dan  perilakan  incremental,  penelitian  ini memperkenalkan pendekatan untuk pemrograman web. Integrasi teknik ini meningkatkan fungsionalitas dan responsif dari antarmuka web dan berkontribusi pada evolusi praktik pengembangan web, membuka jalan bagi aplikasi web yang lebih efisien dan dinamis di masa depan.

## 2. METODOLOGI PENELITIAN

## 2.1 Kerangka Tahapan Penelitian
Langkah-langkah  penelitian  terdahulu  untuk  artikel  jurnal  dengan  Perancangan  Aplikasi  Manajemen  Surat  Keluar Responsive  Dengan  Bootstrap  Berbasis  Web  dapat  mengikuti  pendekatan  yang  telah  digunakan  dalam  penelitian sebelumnya.  Misalnya,  langkah-langkah  yang  disarankan  oleh  [13]  dan  Thiagarajan  dapat  menjadi  panduan  dalam merancang  aplikasi  manajemen  surat  keluar.  Tahap  awal  penelitian  dapat  dimulai  dengan  studi  literatur  untuk memperoleh  dasar  teori  dan  referensi  yang  relevan  sebagaimana  dilakukan  oleh  [14].  Langkah  ini  penting  untuk memahami landasan teoritis yang mendukung perancangan aplikasi. Selanjutnya, pengembangan produk dapat dilakukan dengan merancang desain aplikasi berbasis web menggunakan Bootstrap, sebagaimana yang dilakukan oleh [15] dalam pengembangan media komik strip digital. Selain itu, tahap analisis dan pengumpulan data dari penelitian terdahulu yang relevan,  seperti  yang  dilakukan  oleh  [16],  dapat  membantu  dalam  merumuskan  kerangka  konseptual  dan  metodologi penelitian  yang  tepat.  Langkah-langkah  ini  melibatkan  peninjauan  terhadap  penelitian  sebelumnya  yang  memiliki keterkaitan  dengan  topik  penelitian  untuk  memperoleh  wawasan  yang  mendalam.  Selanjutnya,  tahap  pengembangan produk dapat mengikuti langkah-langkah dari [17], yang mencakup validasi desain, uji coba produk, dan revisi produk berdasarkan hasil pengujian. Dengan demikian, dengan mengadaptasi langkah-langkah penelitian terdahulu yang relevan, penelitian  mengenai  perancangan  aplikasi  manajemen  surat  keluar  responsive  dengan  Bootstrap  berbasis  web  dapat dilakukan secara sistematis dan terstruktur. Gambar 1 ini merupakan kerangka kerja (framework) yang digunakan dalam penelitian ini :

## Gambar 1. Kerangka Kerja Penelitian
Berdasarkan kerangka kerja pada gambar 1, maka masing-masing langkahnya dapat diuraikan seperti dibawah ini : 1. Mendeskripsikan  Permasalahan:  Mendeskripsikan  permasalahan  secara  jelas  akan  membantu  dalam  merancang sistem  informasi  yang  akan  diteliti  harus  dideskripsikan  terlebih  dahulu,  karena  tanpa  mampu  mendeskripsikan permasalahan, menentukan serta mendefenisikan batasan masalah yang akan diteliti, maka tidak akan pernah suatu solusi yang terbaik dari masalah tersebut. Jadi langkah ini adalah langkah awal yang terpenting dalam penelitian ini.
2. Menganalisa Kebutuhan Pengguna: Proses analisa dilakukan dengan  mewawancarai unit terkait tentang kebutuhan evaluasi  maupun  kebutuhan  akreditasi  program  study.  Sistem  yang  dikembangkan  harus  memenuhi  dua  unsur kebutuhan pengguna[18].
3. Perancangan Sistem : Perancangan sistem menggunakan metode prototyping dimana calon pengguna terlibat dalam menevaluasi  rancangan  yang  ditawarkan.  Jika  rancangan  diterima  maka  selanjutnya  adalah  proses  pengembangan program [19].

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342
4. Pengembangan  Sistem  :  Pada  tahap  ini  dilakukan  pengkodean  menggunakan  bahasa  pemrograman  PHP  dengan Framework  CodeIgniter.  Sistem  terdiri  dari  dua  bagian  yaitu  untuk  alumni  dan  admin.  Pada  bagian  alumni  sistem dirancang sesuai kebutuhan perangkat mobile.
5. Pengujian  :  Pengujian  dilakukan  setelah  aplikasi  berhasil  dibangun.  Pengujian  dilakukan  menggunakan  metode blackbox  testing.  Pengujian  ini  dilakukan  pada  tingkat  akhir  dari  pengembangan  aplikasi  dengan  memperhatikan keberhasilan  fungsionalitas  sistem.  Selanjutnya  dilakukan  pengujian  yang  melibatkan  pengguna  sebelum  sistem informasi digunakan[20].
6. Implementasi  Sistem  :  Implementasi  sistem  adalah  tahap  dimana  aplikasi  benar-benar  digunakan.  Pada  tahap  ini sistem informasi berada dilingkungan yang dapat diakes melalui internet.

## 2.2 Teknik Pengumpulan Data dan Analisis Data
Teknik pengumpulan data dan analisis data dalam penelitian kualitatif menggunakan metode studi pustaka, wawancara, dan observasi memiliki beberapa langkah yang penting untuk dipahami :

## 2.2.1 Teknik Pengumpulan Data
Teknik pengumpulan data merupakan cara untuk mendapatkan data yang akan digunakan pada penelitian. Adapun teknik pengumpulan data dapat dilihat berikut:
1. Studi Pustaka
Studi pustaka adalah teknik pengumpulan data yang dilakukan dengan menelaah buku, literatur, catatan, serta berbagai sumber yang relevan dengan masalah penelitian. Peneliti mengumpulkan informasi dari sumber-sumber yang telah ada sebelumnya, seperti buku, jurnal, dan artikel, untuk mendapatkan  wawasan yang lebih luas tentang topik yang diteliti.
2. Wawancara
Wawancara  adalah  teknik  pengumpulan  data  yang  dilakukan  dengan  melakukan  percakapan  langsung  dengan informan atau pemberi data. Peneliti mengajukan pertanyaan yang telah disusun sebelumnya untuk mendapatkan data yang relevan dengan  masalah penelitian. Wawancara dapat dilakukan secara individual atau kelompok, tergantung pada kebutuhan penelitian
3. Observasi
Observasi  adalah  teknik  pengumpulan  data  yang  dilakukan  dengan  mengamati  secara  langsung  fenomena  atau kejadian yang diteliti. Peneliti mencatat apa yang dilihat, didengar, dirasakan, dan dialami selama proses observasi. Observasi dapat dilakukan dengan cara partisipan (participatory observation) atau non-partisipan (non-participatory observation), tergantung pada tingkat interaksi yang diinginkan dengan subjek penelitian.

## 2.2.2 Analisis Data
Setelah pengumpulan data, selanjutnya yaitu tahapan analisis data. Analisis data merupakan tahapan untuk pembahasan terhadap data sebelum digunakan pada penelitian. Adapun analisis data yang dilakukan sebagai berikut:
1. Reduksi Data (Data Reduction)
Proses  reduksi  data  melibatkan  pemilihan,  pemutusan  perhatian,  dan  transformasi  data  kasar  yang  diperoleh  dari catatan  lapangan.  Peneliti  memilih  hal-hal  yang  berhubungan  dengan  aspek-aspek  penting  dalam  penelitian  dan membuang data yang tidak diperlukan. Tujuannya adalah untuk menghasilkan data yang lebih terstruktur dan mudah untuk dianalisis.
2. Penyajian Data (Data Display)
Pada tahap ini, data yang diperoleh dari reduksi data disusun sedemikian rupa sehingga memberikan kemungkinan penarikan kesimpulan dan pengambilan tindakan. Penyajian data ini dilakukan untuk memperkuat hasil reduksi data dan menghasilkan kesimpulan yang lebih akurat. Penyajian data dapat melibatkan berbagai macam matriks, grafik, netwoeks, dan charts untuk mengorganisasikan dan mempermudah pemahaman data
3. Penarikan Kesimpulan (Conclusion Drawing / Verification)
Pada tahap ini, peneliti mengambil kesimpulan berdasarkan susunan narasi yang telah disusun pada tahap sebelumnya. Kesimpulan yang diambil harus sesuai dengan data yang diperoleh dan harus diverifikasi melalui pengecekan ulang data  dan  kesimpulan  yang  telah  diambil.  Proses  ini  dilakukan  untuk  memastikan  bahwa  kesimpulan  yang  diambil tidak menyimpang dari data yang diperoleh.

## 2.3 Perancangan Aplikasi
Dalam  merancang  sebuah  aplikasi,  langkah-langkah  yang  sistematis  dan  terstruktur  sangat  penting  untuk  memastikan keberhasilan pengembangan aplikasi tersebut. Tahap pertama yang perlu dilakukan adalah analisis kebutuhan pengguna dan pemahaman mendalam terhadap masalah yang ingin diselesaikan oleh aplikasi, sebagaimana yang dilakukan dalam penelitian oleh [21] yang merancang sistem inventory gudang untuk optimalisasi manajemen stok. Setelah itu, langkah selanjutnya  adalah  merancang  desain  aplikasi  berdasarkan  kebutuhan  pengguna  dan  fungsionalitas  yang  diinginkan, sebagaimana  yang  dilakukan  oleh  [22]  dalam  merancang  sistem  pengarsipan  surat  secara  digital  di  sebuah  pondok pesantren. Setelah desain aplikasi disusun, tahap pengembangan aplikasi dilakukan dengan memanfaatkan teknologi dan framework yang sesuai dengan kebutuhan aplikasi.

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342
Misalnya, pemanfaatan Bootstrap framework untuk merancang layout web yang responsif, seperti yang dibahas oleh  [4]  dalam  penelitiannya.  Selain  itu,  langkah-langkah  pengujian  aplikasi  juga  merupakan  tahap  krusial  dalam perancangan aplikasi untuk memastikan  bahwa aplikasi berjalan dengan baik dan sesuai dengan spesifikasi yang telah ditetapkan.  Dalam  penelitian  oleh  [23],  tahap  pengujian  aplikasi  inventori  berbasis  Java  dilakukan  untuk  memastikan fungsionalitas aplikasi sebelum diimplementasikan secara luas. Dengan mengikuti langkah-langkah perancangan aplikasi yang  telah  terbukti  efektif  dari  penelitian  terdahulu,  diharapkan  pengembangan  aplikasi  manajemen  surat  keluar responsive dengan Bootstrap berbasis web dapat dilakukan secara sistematis dan menghasilkan aplikasi yang berkualitas serta memenuhi kebutuhan pengguna dengan baik.

## 2.4 Web Responsive
Desain  web  responsif  telah  menjadi  aspek  penting  dari  pengembangan  web  modern,  memungkinkan  situs  web  untuk beradaptasi  dengan  lancar  ke  berbagai  ukuran  layar  dan  perangkat.  Konsep  desain  web  responsif  bertujuan  untuk memberikan pengalaman  menonton  yang optimal,  memastikan bahwa pengguna dapat dengan  mudah  menavigasi dan berinteraksi dengan konten terlepas dari perangkat yang mereka gunakan. Seperti yang ditekankan oleh  [24], tata letak web responsif memainkan peran penting dalam memastikan bahwa halaman web dapat diakses dan ramah pengguna di berbagai  platform,  berkontribusi  pada  pengalaman  pengguna  yang  lebih  menarik.  Salah  satu  keuntungan  utama  dari desain web responsif adalah kemampuannya untuk meningkatkan aksesibilitas konten web pada perangkat mobile. [25] menekankan pentingnya desain responsif dalam memungkinkan akses yang lebih lancar ke halaman web pada smartphone dan perangkat layar kecil lainnya. Dengan menyesuaikan tata letak dan konten secara dinamis berdasarkan ukuran layar, desain  web  responsif  memastikan  bahwa  pengguna  dapat  melihat  dan  berinteraksi  dengan  situs  web  secara  efisien, terlepas dari perangkat yang mereka gunakan. Kemampuan beradaptasi ini sangat penting dalam mengatasi meningkatnya jumlah pengguna yang mengakses internet melalui perangkat mobile.
Selain itu, implementasi teknik desain web responsif, seperti yang dibahas oleh [26], tidak hanya meningkatkan pengalaman pengguna tetapi juga berkontribusi pada efisiensi keseluruhan aplikasi web. Dengan  menggunakan prinsip desain responsif berdasarkan HTML5, CSS3 dan teknologi lainnya, pengembang dapat membuat situs web yang tidak hanya menarik secara visual tetapi juga dioptimalkan untuk kinerja di berbagai perangkat. Pendekatan ini untuk desain web  memungkinkan  pengalaman  pengguna  yang  lebih  lancar  dan  konsisten,  yang  pada  akhirnya  mengarah  pada keterlibatan pengguna dan kepuasan yang lebih tinggi dengan aplikasi web.

## 2.5 Bootstrap Framework
Bootstrap Framework adalah framework pengembangan front-end yang banyak digunakan yang terdiri dari komponen HTML, CSS, dan JavaScript. Ini menyediakan pengembang dengan serangkaian alat dan template untuk membuat situs web  yang  responsif  dan  mobile-friendly  secara  efisien.  [27]  menekankan  popularitas  Bootstrap  dalam  pengembangan web  karena  kemudahan  penggunaannya  dan  fleksibilitas  dalam  merancang  situs  web  yang  dapat  beradaptasi  dengan berbagai  ukuran  layar.  Dengan  menggunakan  sistem  grid,  utilitas  responsif,  dan  komponen  pre-built  yang  ditawarkan oleh Bootstrap, pengembang dapat menyederhanakan proses menciptakan antarmuka web yang menarik secara visual dan fungsional. Salah satu  fitur kunci dari  framework Bootstrap adalah sistem  gridnya,  yang  memungkinkan pengembang untuk  membuat  tata  letak  responsif  dengan  membagi  halaman  web  menjadi  baris  dan  kolom.  Sistem  grid  ini memungkinkan  desain  untuk  menyesuaikan  secara  dinamis  berdasarkan  ukuran  layar,  memastikan  bahwa  konten ditampilkan secara optimal pada perangkat dengan resolusi yang berbeda. [28] menekankan pentingnya desain responsif dalam meningkatkan pengalaman pengguna.
Dengan memanfaatkan sistem grid yang disediakan oleh Bootstrap, pengembang dapat dengan mudah mengatur tata  letak  halaman  web  dan  memastikan  konsistensi  di  berbagai  perangkat,  berkontribusi  pada  pengalaman  pengguna yang  lancar.  Selain  itu,  Bootstrap  menawarkan  berbagai  macam  komponen  dan  kelas  CSS  yang  dapat  dengan  mudah diintegrasikan ke dalam proyek web. Komponen-komponen ini termasuk bar navigasi, tombol, formulir, dan banyak lagi, yang dapat disesuaikan untuk  memenuhi persyaratan desain spesifik situs  web. Dengan  menggunakan  komponen siap pakai  ini,  pengembang  dapat  menghemat  waktu  dan  usaha  dalam  pengkodean  dari  awal,  yang  mengarah  pada  siklus pengembangan  yang  lebih  cepat  dan  proses  desain  web  yang  lebih  efisien.  Fleksibilitas  dan  versatilitas  Bootstrap menjadikannya kerangka kerja yang berharga untuk membuat situs web yang responsif dan menarik secara visual yang memenuhi berbagai kebutuhan pengguna di berbagai perangkat.

## 3. HASIL DAN PEMBAHASAN
Tujuan  dari  perancangan  aplikasi  manajemen  surat  keluar  responsive  dengan  bootstrap  berbasis  web  adalah  untuk menghasilkan sebuah sistem yang dapat membantu perusahaan dalam mengelola surat keluar secara efisien dan efektif. Hasil yang diharapkan adalah aplikasi yang dapat diakses dari berbagai perangkat, responsif terhadap ukuran layar, dan memiliki  antarmuka  yang  user-friendly.  Pembahasan  akan  meliputi  analisis  kebutuhan  perusahaan,  desain  antarmuka, serta implementasi teknologi bootstrap untuk membentuk aplikasi yang dapat memenuhi kebutuhan perusahaan dalam mengelola surat keluar.

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342

## 3.1 Analisa Kebutuhan Pengguna
Analisis  kebutuhan  pengguna  Kepala  Bagian  Surat,  Tata  Usaha  dalam  perancangan  aplikasi  manajemen  surat  keluar responsive  dengan  bootstrap  berbasis  web  menunjukkan  bahwa  mereka  membutuhkan  sebuah  sistem  yang  dapat membantu mereka dalam mengelola surat keluar dengan lebih efisien. Kebutuhan utama mereka adalah sistem yang dapat menyimpan  dan  mengelola  data  surat  keluar  secara  terstruktur,  memudahkan  pencarian  dan  pencetakan  surat,  serta memberikan laporan  yang akurat dan real-time.  Selain itu,  mereka juga  membutuhkan sistem  yang dapat diakses dari berbagai perangkat dan responsif terhadap ukuran layar, sehingga dapat digunakan dengan mudah di berbagai lokasi dan situasi. Berikut ini beberapa kebutuhan yang diinginkan :
1. Admin Tata Usaha Persuratan
a. Membuat Surat Keluar: Admin membuat surat keluar sesuai dengan permintaan dari aktor lain.
b. Cek Surat: Admin melakukan cek terhadap surat keluar sebelum dikirimkan.
c. Mengirim Surat: Admin mengirimkan surat keluar kepada aktor lain yang berhak menerima surat tersebut.
d. Membuat Laporan: Admin membuat laporan tentang surat keluar yang telah dikirimkan.
2. Kepala Bagian Tata Usaha
a. Membuat Surat Keluar: Kepala Bagian Tata Usaha Persuratan membuat surat keluar sesuai dengan permintaan dari aktor lain.
b. Cek Surat: Kepala Bagian Tata Usaha Persuratan melakukan cek terhadap surat keluar sebelum dikirimkan.
c. Mengirim Surat: Kepala Bagian Tata Usaha Persuratan mengirimkan surat keluar kepada aktor lain yang berhak menerima surat tersebut.
d. Membuat  Laporan:  Kepala  Bagian  Tata  Usaha  Persuratan  membuat  laporan  tentang  surat  keluar  yang  telah dikirimkan.

## 3.2 Perancangan Sistem dengan UML
Tujuan perancangan sistem dengan UML adalah untuk menyajikan alat analisis, desain, dan implementasi sistem berbasis perangkat lunak bagi para programmer. UML menyediakan beragam diagram yang dapat digunakan untuk memodelkan berbagai  aspek  dari  sistem  perangkat  lunak,  mulai  dari  struktur  statis  hingga  perilaku  dinamis.  Dengan  menggunakan UML,  pengembang  perangkat  lunak  dapat  memahami,  merencanakan,  dan  merancang  sistem  perangkat  lunak  secara sistematis dan terstruktur, sehingga memfasilitasi pengembangan perangkat lunak yang efisien dan efektif

## 3.2.1 Use Case Diagram
Use  Case  Diagram  adalah  jenis  representasi  visual  yang  umum  digunakan  dalam  rekayasa  perangkat  lunak  untuk menggambarkan  interaksi  antara  pengguna  dan  sistem.  Grafik  ini  memberikan  gambaran  tingkat  tinggi  tentang fungsionalitas  suatu  sistem  dari  sudut  pandang  pengguna.  [29]  membahas  penerapan  model  formal  kabur  dalam mengevaluasi arsitektur perangkat lunak, yang dapat diperluas untuk menggabungkan fitur kabur ke dalam diagram kasus penggunaan.  Dengan  menggunakan  stereotip  dan  fitur-fitur  yang  membingungkan,  diagram  kasus  penggunaan  dapat diubah  menjadi  diagram  kes-kes  penggunaan,  meningkatkan  representasi  interaksi  pengguna-sistem  dengan  tingkat ketidakpastian  atau  ketidakakuratan.  Penggunaan  diagram  di  berbagai  bidang  melampaui  rekayasa  perangkat  lunak, seperti yang ditunjukkan oleh [30] dalam konteks spasialisasi hubungan non-spasial dalam penjelasan keturunan. Diagram memainkan  peran  penting  dalam  spasialisasi  konsep  dan  hubungan  abstrak,  membuat  informasi  yang  kompleks  lebih mudah diakses dan dimengerti.

## Gambar 2. Use Case Diagram
Pada  gambar  2.  Use  Case  Diagram  Admin  Tata  Usaha  dan  Kepala  Bagian  Tata  Usaha  dalam  surat  keluar menunjukkan interaksi antara aktor dan sistem dalam proses pengelolaan surat keluar. Aktor yang terlibat dalam diagram ini adalah Admin Tata Usaha dan Kepala Bagian Tata Usaha, yang bertanggung jawab untuk mengelola dan mengontrol proses pengelolaan surat keluar. Admin Tata Usaha, seorang administrator yang bertanggung jawab untuk mengelola dan mengontrol proses pengelolaan surat keluar. Kepala Bagian Tata Usaha, seorang kepala bagian yang bertanggung jawab untuk  mengelola  dan  mengontrol  proses  pengelolaan  surat  keluar.  Use  Case  Diagram  ini  membantu  dalam menggambarkan interaksi antara aktor dan sistem dalam proses pengelolaan surat keluar, serta  menunjukkan aktivitas yang dilakukan oleh Admin Tata Usaha dan Kepala Bagian Tata Usaha dalam mengelola surat keluar.

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342

## 3.3 Perancangan Aplikasi Manajemen Surat Keluar Responsive
Perancangan aplikasi manajemen surat keluar responsive dengan bootstrap berbasis web dilakukan dengan tujuan untuk menghasilkan sistem yang dapat membantu perusahaan dalam mengelola surat keluar secara efisien dan efektif. Aplikasi ini dirancang untuk dapat diakses dari berbagai perangkat, responsif terhadap ukuran layar, dan memiliki antarmuka yang user-friendly.  Dengan  menggunakan  teknologi  bootstrap,  aplikasi  ini  dapat  memenuhi  kebutuhan  perusahaan  dalam mengelola surat keluar, seperti menyimpan dan mengelola data surat keluar secara terstruktur, memudahkan pencarian dan pencetakan surat, serta memberikan laporan yang akurat dan real-time.

## 3.3.1 Halaman Home Login
Halaman login admin dalam aplikasi manajemen surat keluar responsive dengan bootstrap berbasis web dirancang untuk memudahkan proses autentikasi admin. Halaman ini  menampilkan  form login  yang  meminta username dan password, serta tombol untuk mengirimkan data. Form login ini dirancang dengan bootstrap untuk memastikan bahwa tampilan dan interaksi  antarmuka  yang  digunakan  adalah  responsif  dan  user-friendly.  Setelah  admin  berhasil  login,  mereka  akan diarahkan ke dashboard admin yang memberikan akses penuh ke fitur-fitur manajemen surat keluar.

## Gambar 3. Halaman Form Login Admin
Pada  gambar  3  form  login  admin,  halaman  login  admin  dalam  aplikasi  manajemen  surat  keluar  responsive  dengan bootstrap berbasis web adalah sebagai berikut: setelah admin mengakses halaman login, mereka akan melihat form login yang  meminta  username  dan  password.  Setelah  memasukkan  data,  admin  akan  menekan  tombol  "Login"  untuk mengirimkan data tersebut ke server. Server akan memeriksa kredensial yang diberikan dan, jika valid, akan mengirimkan respon  ke  browser  admin  yang  menunjukkan  bahwa  mereka  berhasil  login.  Setelah  itu,  admin  akan  diarahkan  ke dashboard admin yang memberikan akses penuh ke fitur-fitur manajemen surat keluar.

## 3.3.2 Halaman Dasboard Admin
Halaman dashboard admin dalam aplikasi manajemen surat keluar responsive dengan bootstrap berbasis web dirancang untuk  memberikan  akses  penuh  ke  fitur-fitur  manajemen  surat  keluar.  Halaman  ini  menampilkan  berbagai  menu  dan tombol  yang  memudahkan  admin  dalam  mengelola  surat  keluar,  seperti  membuat  surat  keluar  baru,  mengirim  surat keluar, mencetak surat keluar, dan membuat laporan. Tampilan dashboard ini dirancang responsif dengan menggunakan bootstrap,  sehingga  dapat  diakses  dari  berbagai  perangkat  dan  ukuran  layar,  memberikan  pengalaman  pengguna  yang optimal dan konsisten.

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342
Pada gambar 4. Cara kerja halaman dashboard admin dalam aplikasi manajemen surat keluar responsive dengan bootstrap berbasis web adalah sebagai berikut: setelah admin berhasil login, mereka akan diarahkan ke dashboard admin yang menampilkan menu utama yang terdiri dari tiga bagian utama, yaitu menu surat keluar, surat masuk, dan laporan. Setiap menu ini memiliki sub-menu yang memungkinkan admin untuk melakukan berbagai tindakan, seperti membuat surat keluar baru, mengirim surat keluar, mencetak surat keluar, dan membuat laporan. Admin dapat mengakses setiap sub-menu  dengan  mengklik  menu  utama  yang  sesuai,  dan  setiap  sub-menu  akan  menampilkan  form  atau  tabel  yang relevan dengan tindakan yang ingin dilakukan.

## 3.3.3 Halaman Dashboard Surat Keluar
Halaman  dashboard  surat  keluar  pada  aplikasi  manajemen  surat  keluar  responsive  dengan  bootstrap  berbasis  web dirancang  untuk  memberikan  akses  penuh  ke  fitur-fitur  manajemen  surat  keluar,  seperti  membuat  surat  keluar  baru, mengirim  surat  keluar,  mencetak  surat  keluar,  dan  membuat  laporan.  Dashboard  ini  menampilkan  menu  utama  yang terdiri  dari  tiga  bagian  utama,  yaitu  menu  surat  keluar,  surat  masuk,  dan  laporan,  yang  memungkinkan  admin  untuk mengakses dan mengelola surat keluar dengan mudah dan efisien.

## Gambar 5. Halaman Data Surat Keluar
Pada gambar 4 halaman dashboard semua surat keluar pada aplikasi manajemen surat keluar responsive dengan bootstrap berbasis web adalah sebagai berikut: setelah admin mengakses halaman dashboard, mereka akan melihat daftar semua surat keluar yang telah dibuat, termasuk surat keluar yang sedang diproses, yang telah dikirimkan, dan yang telah dicetak. Halaman ini juga menampilkan menu utama yang terdiri dari tiga bagian utama, yaitu menu surat keluar, surat masuk, dan laporan, yang memungkinkan admin untuk mengakses dan mengelola surat keluar dengan mudah dan efisien.

## 4. KESIMPULAN
Aplikasi  manajemen  surat  keluar  responsive  dengan  bootstrap  berbasis  web  telah  berhasil  dirancang  dan diimplementasikan di Devisi Rumah Tangga Bappeda Kota Medan. Aplikasi ini dirancang untuk membantu perusahaan dalam  mengelola surat keluar dengan lebih efisien dan efektif. Dengan  menggunakan teknologi bootstrap, aplikasi ini dapat diakses dari berbagai perangkat dan ukuran layar, memberikan pengalaman pengguna yang optimal dan konsisten. Aplikasi ini juga dilengkapi dengan berbagai fitur yang memudahkan pengguna dalam mengelola surat keluar, seperti membuat surat keluar baru, mengirim surat keluar, mencetak surat keluar, dan membuat laporan. Selain itu, aplikasi ini juga  dilengkapi  dengan  sistem  keamanan  yang  baik,  sehingga  data  surat  keluar  dapat  dijamin  keamanannya.  Dan sebaiknya ada untuk meningkatkan aplikasi ini, dapat dilakukan beberapa saran, seperti: Menambahkan fitur pencarian dan  filter  yang  lebih  canggih  untuk  memudahkan  pengguna  dalam  mencari  surat  keluar  yang  mereka  butuhkan. Menambahkan fitur notifikasi dan reminder untuk mengingatkan pengguna tentang surat keluar yang harus dikirimkan atau dicetak. Menambahkan fitur integrasi dengan sistem lain, seperti sistem pengarsipan atau sistem komunikasi, untuk memudahkan pengguna dalam mengelola surat keluar. Dengan adanya saran-saran ini, aplikasi manajemen surat keluar responsive  dengan  bootstrap  berbasis  web  dapat  menjadi  lebih  baik  dan  lebih  bermanfaat  bagi  pengguna.  Bootstrap menyediakan grid system yang responsif, yang memungkinkan pembuat aplikasi untuk membuat tata letak yang dapat menyesuaikan  diri  dengan  berbagai  ukuran  layar.  Grid  system  ini  menggunakan  unit  relatif  seperti  em  dan  %  untuk

## BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3639 (Media Online) Vol 4, No 4, Juni 2024 | Hal 368-375 https://hostjournals.com/bulletincsr DOI: 10.47065/bulletincsr.v4i4.342
menentukan lebar dan tinggi elemen, sehingga tampilan tetap rapi meskipun diakses dari perangkat dengan ukuran layar yang berbeda.

## REFERENCES
[1] R. Ishak, Setiaji, F. Akbar, and M. Safudin, “Rancang Bangun Sistem Informasi Surat Masuk Dan Surat Keluar Berbasis WEB Menggunakan Metode Waterfall,” J. Indones. Sos. Teknol., vol. 1, no. 3, pp. 198–209, 2020, doi: 10.36418/jist.v1i3.33.
[2] I. Sahidin, “Perancangan Sistem Informasi Menejemen Surat Pada Prumda Tirta Musi Palembang Dengan Metode Waterfall,” Stains, vol. 3, no. 1, pp. 428–437, 2024, doi: 10.29407/stains.v3i1.4333.
[3] R. Guntari and R. Setiawan, “Rancang Bangun Aplikasi Pengelolaan Surat Di Desa Tanjung Kamuning,” J. Algoritm., vol. 13, no. 2, pp. 269–274, 2016, doi: 10.33364/algoritma/v.13-2.269.
[4] A.  Zakir,  “Rancang  Bangun  Responsive  Web  Layout  Dengan  Menggunakan  Bootstrap  Framework,”  Infotekjar  (Jurnal  Nas. Inform. Dan Teknol. Jaringan), vol. 1, no. 1, pp. 7–10, 2016, doi: 10.30743/infotekjar.v1i1.31.
[5] F.  ria,    jery  lorenza,  and  Y.  I.  Mukti,  “Aplikasi  Management  Surat  Pada  Dinas  Kesehatan  Kota  Pagaralam  Menggunakan Codeigniter,” J. Ilm. Betrik, vol. 11, no. 2, pp. 108–115, 2020, doi: 10.36050/betrik.v11i2.203.
[6] F. Adfiansyah, “Rancang Bangun Aplikasi Rekomendasi Smartphone Menggunakan Teknologi Responsive Web Design Dengan Framework Bootstrap,” Jati (Jurnal Mhs. Tek. Inform., vol. 7, no. 5, pp. 3744–3751, 2024, doi: 10.36040/jati.v7i5.7823.
[7] M. F. Santoso, “Teknik Responsive Web Design Bootstrap 4 Serta Penerapannya Dalam Rancang Bangun Layout Web,” J. Pilar Nusa Mandiri, vol. 15, no. 1, pp. 61–68, 2019, doi: 10.33480/pilar.v15i1.101.
[8] S. Supiyandi, M. Zen, C. Rizal, and M. Eka, “Perancangan Sistem Informasi Desa  Tomuan Holbung Menggunakan Metode Waterfall,” JURIKOM (Jurnal Ris. Komputer), vol. 9, no. 2, pp. 274–280, 2022.
[9] H. Irsyad, “Penerapan Metode Waterfall Pada Aplikasi Perumahan  Di Kota Palembang Berbasis Web Mobile  (Studi Kasus Pt. Sandaran Sukses Abadi),” Jutim (Jurnal Tek. Inform. Musirawas), vol. 3, no. 1, p. 9, 2018, doi: 10.32767/jutim.v3i1.310.
[10]  F. S. Nurjanah, Y. Permana, F. Abdussalaam, and J. Arifin, “Web Based Incoming and Outgoing Mail Management Information System  With  CodeIgniter  Framework,”  Digit.  Zo.  J.  Teknol.  Inf.  Dan  Komun.,  vol.  12,  no.  2,  2021,  doi: 10.31849/digitalzone.v12i2.7495.
[11]  J.  Andreeva  et  al.,  “Designing  and  Developing  Portable  Large-Scale  JavaScript  Web  Applications  Within  the  Experiment Dashboard Framework,” J. Phys. Conf. Ser., vol. 396, no. 5, p. 52069, 2012, doi: 10.1088/1742-6596/396/5/052069.
[12]  B. Reynders, F. Piessens, and D. Devriese, “Gavial: Programming the Web With Multi-Tier FRP,” Art Sci. Eng. Program., vol. 4, no. 3, 2020, doi: 10.22152/programming-journal.org/2020/4/6.
[13]  G. Gall and J. P. Gall, “Borg.(2003),” Educ. Res. An Introd., vol. 7.
[14]  P. A. Widyastuti, “Relevansi Mata Kuliah Sejarah Desain Industri Terhadap Proses Kreatif Dunia Industri Produk,”  Gestalt J. Desain Komun. Vis., vol. 2, no. 2, pp. 167–180, 2020.
[15]  E. Safitri, A. Setiawan, and R. Darmayanti, “Eksperimentasi Model Pembelajaran Problem Based Learning Berbantuan Kahoot Terhadap Kepercayaan Diri Dan Prestasi Belajar,” J. Penelit. Tindakan Kelas, vol. 1, no. 2, pp. 57–61, 2023.
[16]  P. Yasintha, D. Darmawang, and K. Nur Risnawati, “Peran Lingkungan Belajar terhadap Konsentrasi Belajar Peserta Didik di SMK Katolik Muktyaca,” Jurnal, vol. 2, no. 1, pp. 12–20, 2022.
[17]  C.  Wulandari  and  I.  Wikartika,  “STRATEGI  MEMAJUKAN  UMKM  MIMI  KITCHEN  DALAM  MENGHADAPI  ERA DIGITAL,” J. Ekon. dan Manaj., vol. 6, no. 1, 2024.
[18]  E.  Putra,  R.  F.  Wijaya,  and  R.  Krisna,  “Perancangan  Sistem  Simpan  Pinjam  Berbasis  Website,”  KOMIK  (Konferensi  Nas. Teknol. Inf. dan Komputer), vol. 6, no. 1, pp. 847–854, 2023.
[19]  V. Tasril, M. Zen, E. S. Fitriani, and A. D. Putra, “User Experience Rancangan Game-Based Learning Untuk Vocabulary Bahasa Inggris,” Escaf, vol. 2, no. 1, pp. 967–974, 2023.
[20]  A.  Lubis  and  I.  Sumartono,  “Implementasi  Layanan  Akademik  Berbasis  Chatbot untuk  Meningkatkan  Interaksi  Mahasiswa,” Media Online, vol. 3, no. 5, pp. 397–403, 2023.
[21]  K. Kokanda, “Rancang Bangun Sistem Inventory Gudang Cv. Pacific Com-Puter Dalam Optimalisasi Manajemen Stok,” J-Com (Journal Comput., vol. 4, no. 1, pp. 6–14, 2024, doi: 10.33330/j-com.v4i1.2939.
[22]  W. S. M. Sanjaya, A. Khoiriah, D. Kurniawan, and A. Saputra, “Metode Usability Pada Rancang Bangun Sistem Pengarsipan Surat Sacara Digital Di Pondok Pesantren Miftahul Jannah,” Intecoms J. Inf. Technol. Comput. Sci., vol. 4, no. 2, pp. 216–223, 2021, doi: 10.31539/intecoms.v4i2.2711.
[23]  A. P. Irianti, A. Susanto, and S. M. Sagita, “Rancangan Sistem Aplikasi Inventori Berbasis  Java Pada SMA Yapemri Depok,” J. Ris. Dan Apl. Mhs. Inform., vol. 1, no. 04, 2020, doi: 10.30998/jrami.v1i04.427.
[24]  M. Laine, S. Santala, J. Jokinen, and A. Oulasvirta, “Responsive and Personalized Web Layouts With Integer Programming,” Proc. Acm Human-Computer Interact., vol. 5, no. EICS, pp. 1–23, 2021, doi: 10.1145/3461735.
[25]  M.  A.  Z.  D.  M.  N.  Mazlan,  “Electronic  Storefront  Development  Using  Responsive  Web  Design  (ACECS),”  Math.  Sci. Informatics J., vol. 4, no. 1, pp. 113–123, 2023, doi: 10.24191/mij.v4i2.23816.
[26]  T.-H. Huang, “An Intelligent E-Pharmacopoeia Retrieval System Using Responsive Web Design,” Int. J. Eng. Technol. Innov., vol. 14, no. 2, pp. 177–188, 2024, doi: 10.46604/ijeti.2023.12801.
[27]  S. Geetha, D. Dalvi, and M. Tandel, “Bootstrap and Django Framework,” Int. J. Adv. Res. Sci. Commun. Technol., pp. 130–133, 2021, doi: 10.48175/ijarsct-2158.
[28]  Y.-C.  Chang,  T.  Chang,  and  M.-C.  Wang,  “Are  Healthcare  Expenditures  Related  to  Economic  Growth  in  China?  Bootstrap ARDL Approach,” Front. Public Heal., vol. 9, 2022, doi: 10.3389/fpubh.2021.766091.
[29]  P.  Behbahaninejad,  A.  Harounabadi,  and  S.  J.  Mirabedini,  “Evaluating  Software  Architecture  Using  Fuzzy  Formal  Models,” Manag. Sci. Lett., vol. 2, no. 2, pp. 469–476, 2012, doi: 10.5267/j.msl.2012.01.010.
[30]  N. J. Enfield, “Producing and Editing Diagrams Using Co‐Speech Gesture: Spatializing Nonspatial Relations in Explanations of Kinship in Laos,” J. Linguist. Anthropol., vol. 13, no. 1, pp. 7–50, 2003, doi: 10.1525/jlin.2003.13.1.7.