Sistem Informasi Pendaftaran dan Profile Kelas Renang berbasis Web pada Teman Renang

Abstrak

Perkembangan teknologi informasi mendorong berbagai sektor usaha untuk memanfaatkan media digital sebagai sarana penyampaian informasi dan layanan. Teman Renang sebagai salah satu tempat kebugaran memerlukan media digital yang mampu menyajikan informasi profile usaha, fasilitas, serta mempermudah proses pendaftaran member secara daring.

Selama ini, penyampaian informasi dan pencatatan data masih dilakukan secara manual sehingga kurang efektif dan tidak terorganisir dengan baik. Kondisi tersebut menimbulkan keterbatasan dalam akses informasi serta pengelolaan data member.

Oleh karena itu, Kerja Praktek ini bertujuan untuk merancang dan membangun sebuah website profile dan layanan pendaftaran member Teman Renang.

Proses pengembangan website dilakukan melalui beberapa tahapan, meliputi analisis kebutuhan, perancangan tampilan, implementasi menggunakan HTML, CSS, dan JavaScript, serta pengujian fungsionalitas yang dikembangkan dilengkapi dengan fitur informasi profile Teman Renang, galeri fasilitas, jadwal operasional, formulir pendaftaran member, serta halaman admin untuk melihat data pendaftaran yang tersimpan menggunakan localStorage.

Hasil dari kegiatan Kerja Praktek ini menunjukkan bahwa website mampu menyajikan informasi secara lebih terstruktur, mempermudah calon member dalam melakukan pendaftaran, serta membantu pihak Teman Renang dalam pengelolaan data member.

Dengan adanya website ini, proses pelayanan menjadi lebih cepat, efisien, dan modern sehingga dapat meningkatkan kualitas pelayanan dan profesionalitas Teman Renang.

Kata kunci: Website, Sistem Informasi, Teman Renang, Member, Teman Renang.

Abstract

The development of information technology has encouraged various business sectors to utilize digital media as a means of delivering information and services. Teman Renang, requires digital media capable of presenting business profile information, facilities, and simplifying the online member registration process.

Currently, information dissemination and data recording are still carried out manually, making them less effective and poorly organized. This condition results in limited access to information and difficulties in managing member data.

Therefore, this internship aims to design and develop a profile website and member registration service for Teman Renang. The website development process is carried out through several stages, including requirements analysis, interface design, implementation using HTML, CSS, and JavaScript, as well as functionality testing.

The developed website is equipped with features such as Teman Renang profile information, facility galleries, operational schedules, member registration forms, and an admin page to view registration data stored using localStorage.

The results of this internship indicate that the website is able to present information in a more structured manner, facilitate prospective members in registering, and assist Teman Renang in managing member data.

With the implementation of this website, service processes become faster, more efficient, and more modern, thereby improving service quality and enhancing the professionalism of Teman Renang.

Keywords: Website, Information System, Teman Renang, Member, Teman Renang.

Kata Pengantar

Puji syukur kita panjatkan kehadirat Allah SWT. yang telah memberikan rahmat dan hidayahNya sehingga kami dapat menyelesaikan laporan kerja praktek ini tepat pada waktunya.

Adapun tujuan dari penulisan laporan ini adalah untuk memenuhi laporan kerja praktek pada mata kuliah Kerja Praktek. Terselesaikannya laporan kerja praktek ini tidak lepas dari bantuan serta bimbingan dari semua pihak.

Oleh karena itu, kami ucapkan terima kasih yang sebesar-besarnya kepada:

1. Bapak Dr. Pranoto, S.E., M.M.selaku Ketua Yayasan Sasmita Jaya.
2. Bapak Dr. HE Nurzaman, AM., MM., M.Si. selaku Rektor Universitas Pamulang.
3. Bapak Yan Mitha Djaksana, M.Kom. selaku Dekan Fakultas Ilmu Komputer Universitas Pamulang.
4. Bapak Dr. Eng. Ahmad Musyafa, S.Kom.,M.Kom. selaku Kepala Program Studi Teknik Informatika yang telah memberikan izin untuk melaksanakan kerja praktek.
5. Bapak Joko Priambodo, S.Kom,.MM,.M.Kom. selaku Dosen Pembimbing Kerja Praktek.
6. Bapak Munanda, S.pd selaku pemilik Teman Renang 
7. Kedua orang tua, dan adik serta semua anggota keluarga yang telah memberikan bantuan, serta Do’a selama penyusunan laporan kerja praktek ini.
8. Rekan rekan Mahasiswa/Mahasiswi Universitas Pamulang Teknik Informatika yang telah banyak memberikan dukungannya.

Dalam hal ini, penulis telah berusaha sebaik mungkin dalam menyusun laporan kerja praktek ini, kami menyadari bahwa laporan kerja praktek yang kami tulis ini masih jauh dari kata sempurna.

Oleh karena itu, kritik dan saran yang membangun kami butuhkan demi kesempurnaan laporan kerja praktek ini.

BAB I PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi informasi yang semakin pesat pada era digital saat ini membawa perubahan signifikan dalam berbagai bidang, termasuk sektor jasa dan layanan. Hampir seluruh aktivitas bisnis kini memanfaatkan media digital sebagai sarana penyampaian informasi, promosi, maupun pelayanan kepada pelanggan.

Salah satu bentuk pemanfaatan teknologi tersebut adalah penggunaan website sebagai platform utama untuk mengenalkan profile usaha, menyediakan layanan, sekaligus meningkatkan jangkauan informasi kepada masyarakat luas.

Digitalisasi dalam usaha mikro dan kecil memperkuat sistem informasi sehingga kegiatan pengolahan transaksi dapat dilakukan dengan lebih efisien dan terstruktur (Santoso & Dewi, 2022).

Teman Renang sebagai sebuah tempat kebugaran yang menyediakan fasilitas latihan dan layanan membership juga membutuhkan sarana informasi yang efektif dan mudah diakses.

Selama ini, penyampaian informasi mengenai profile Teman Renang, fasilitas, jadwal operasional, serta layanan pendaftaran member masih dilakukan secara manual, seperti melalui komunikasi langsung.

Cara tersebut memiliki keterbatasan, di antaranya informasi tidak tersusun secara terstruktur, sulit dijangkau oleh calon member yang memerlukan detail lengkap, serta belum adanya sistem pencatatan pendaftaran yang praktis dan terorganisir.

Implementasi sistem informasi pada usaha kecil menengah dapat membantu pencatatan transaksi dan laporan penjualan secara digital, menggantikan metode manual yang kurang efisien (Harjoseputro et al., 2021).

Melihat kondisi tersebut, diperlukan sebuah website yang mampu memberikan informasi secara lengkap, jelas, dan terintegrasi, serta dapat digunakan oleh calon member untuk melakukan pendaftaran secara daring.

Website yang dirancang diharapkan dapat membantu memudahkan proses penyampaian informasi, memperluas jangkauan promosi, serta memberikan kemudahan bagi pihak Teman Renang dalam melakukan pengelolaan data member.

Selain itu, pembuatan website ini menjadi bentuk implementasi langsung dari pengetahuan dan keterampilan penulis selama mengikuti perkuliahan, khususnya dalam bidang pengembangan web.

Dengan adanya website profile dan layanan member ini, Teman Renang dapat meningkatkan profesionalitas, efektivitas pelayanan, serta kemudahan akses informasi bagi masyarakat.

Hal ini juga sejalan dengan kebutuhan bisnis modern yang menuntut setiap usaha untuk memiliki identitas digital yang kredibel dan mudah diakses.

Oleh karena itu, kegiatan Kerja Praktek ini dilaksanakan sebagai upaya untuk membantu Teman Renang dalam proses digitalisasi layanan serta sebagai sarana pembelajaran praktis bagi penulis.

1.2 Identifikasi Masalah

Mengacu pada latar belakang masalah di atas, maka terdapat beberapa masalah yang dapat diidentifikasi untuk dikaji lebih lanjut dalam penelitian ini. Identifikasi masalah tersebut di antaranya adalah sebagai berikut.

1. Sistem pendaftaran peserta masih dilakukan secara manual, sehingga proses administrasi menjadi lambat dan kurang efisien.
2. Terjadinya antrean panjang dan waktu pelayanan yang terbatas pada saat pendaftaran langsung di lokasi.
3. Risiko kehilangan, kerusakan, atau ketidakakuratan data akibat pencatatan berbasis kertas dan input manual.

1.3 Rumusan Masalah

Berdasarkan identifikasi masalah di atas, rumusan masalah untuk perancangan website sebagai media strategis promosi layanan pada Teman Renang adalah sebagai berikut:

1. Bagaimana membangun sistem pendaftaran renang berbasis web yang dapat diakses secara online oleh seluruh calon peserta tanpa keterbatasan waktu dan lokasi?
2. Bagaimana merancang tampilan dan struktur informasi yang mampu menyajikan jadwal kelas, kategori level, dan rincian biaya secara akurat, terorganisasi, dan mudah dipahami pengguna?
3. Bagaimana menyediakan fitur pengelolaan data peserta yang efektif bagi admin, sehingga proses validasi, pembaruan data, dan pembuatan laporan dapat dilakukan secara cepat dan terstruktur?

1.4 Batasan Masalah

Dalam pelaksanaan Kerja Praktek di Teman Renang selama 3 bulan, penulis hanya akan membatasi masalah yang diantaranya:

1. Ruang lingkup sistem dibatasi pada proses pendaftaran peserta renang, yang meliputi pengisian data diri, pemilihan kelas, dan konfirmasi pendaftaran. Sistem tidak mencakup modul pelatihan teknis, evaluasi atlet, atau pengelolaan kurikulum pelatihan..
2. Informasi yang ditampilkan dalam sistem hanya mencakup jadwal kelas, kategori level, profil instruktur, dan rincian biaya, tanpa mencakup penjadwalan fasilitas kolam atau manajemen sarana prasarana.
3. Fitur admin difokuskan pada pengelolaan data peserta, seperti validasi pendaftaran, pembaruan data, serta pembuatan rekap laporan sederhana. Sistem tidak mencakup analitik lanjutan seperti prediksi jumlah peserta atau dashboard statistik kompleks.

1.5 Tujuan Kerja Praktek

Pelaksanaan Kerja Praktek di Teman Renang memiliki beberapa tujuan utama yang ingin dicapai oleh mahasiswa, yaitu sebagai berikut:

1. Mengaplikasikan pengetahuan serta keterampilan yang diperoleh selama masa perkuliahan ke dalam pekerjaan nyata, khususnya dalam proses perancangan dan pembuatan website.
2. Mendukung Teman Renang dalam menyediakan sarana informasi berbasis digital, berupa website yang menampilkan profile usaha, fasilitas, galeri, dan jam operasional secara profesional dan mudah diakses oleh pengunjung.
3. Membangun sistem pendaftaran member secara online agar calon anggota dapat melakukan registrasi dengan lebih mudah tanpa harus datang langsung ke tempat.
4. Menyusun halaman admin sederhana yang dapat dimanfaatkan oleh pihak Teman Renang untuk meninjau, mengelola, dan memonitor data pendaftaran member secara efisien.

1.6 Manfaat Kerja Praktek

Manfaat dari kerja praktek adalah:

1. Mahasiswa mendapatkan pengalaman langsung dalam membuat dan menerapkan website.
2. Meningkatkan kemampuan teknis seperti analisis kebutuhan, desain UI, dan pemrograman web.
3. Melatih soft skill seperti komunikasi, kerjasama, dan manajemen waktu.
4. Menambah wawasan tentang proses kerja di lingkungan usaha.
5. Menjadi bekal untuk persiapan dunia kerja di bidang teknologi informasi.

1.7 Sistematika Penulisan

Sistematika penulisan yang disusun pada laporan ini terdapat 4 Bab dan diuraikan sebagai berikut:

1. BAB I PENDAHULUAN

Pada bab ini berisi tentang Latar Belakang pemilihan judul, Identifikasi Masalah yang ditemukan di Teman Renang, Rumusan Masalah, Batasan Kerja Praktek, Tujuan, Manfaat pembuatan website, dan sistematika penulisan.

2. BAB II ORGANISASI

Pada bab ini berisi tentang Gambaran Umum Teman Renang , Visi dan Misi perusahaan , Lokasi dan Fasilitas , Struktur Organisasi, serta Keterkaitan Kerja Praktek dengan kegiatan operasional perusahaan.

3. BAB III PEMBAHASAN

Berisi landasan teori, analisis sistem saat ini, analisis sistem yang diusulkan, perancangan sistem, diagram sistem, perancangan basis data, proses implementasi, dan dokumentasi tampilan website.

4. BAB IV PENUTUP

Berisi tentang kesimpulan dan Saran untuk pengembangan sistem di masa mendatang.

BAB II TEMPAT KERJA PRAKTEK

2.1 Gambaran Umum Teman Renang

Teman Renang merupakan kelas latihan renang yang menyediakan layanan pembelajaran dan pelatihan renang bagi masyarakat umum.

Kelas ini hadir sebagai sarana untuk meningkatkan kesehatan, kebugaran, serta keterampilan renang, baik bagi pemula maupun peserta yang ingin mengembangkan teknik renang secara lebih terarah dan profesional.

Teman Renang berkomitmen memberikan pelayanan yang ramah, metode pembelajaran yang sistematis, serta lingkungan latihan yang aman dan nyaman bagi seluruh peserta.

Sebagai kelas renang yang sedang berkembang, Teman Renang terus melakukan upaya peningkatan kualitas layanan. Saat ini, proses pendaftaran peserta, pembayaran kelas, serta pencatatan data member masih dilakukan secara manual.

Metode tersebut memiliki keterbatasan, khususnya dalam hal pengelolaan data, efisiensi administrasi, serta akurasi pencatatan.

Oleh karena itu, melalui kegiatan Kerja Praktek ini dirancang sebuah website yang berfungsi untuk mendukung digitalisasi data peserta sekaligus sebagai media informasi dan promosi kelas renang.

Lokasi Teman Renang yang berada di area yang relatif jauh dari pusat keramaian menjadikan media digital sebagai kebutuhan penting untuk menjangkau masyarakat secara lebih luas.

Website yang dikembangkan diharapkan mampu membantu memperkenalkan Kelas Renang Teman Renang kepada calon peserta, meningkatkan visibilitas layanan, serta mendukung proses pemasaran secara digital.

Selain itu, website ini juga dirancang untuk menyediakan informasi lengkap mengenai profile Teman Renang, jenis kelas renang, jadwal latihan, biaya pendaftaran, serta layanan pendaftaran peserta secara daring yang lebih efektif dan efisien.

2.2 Logo Teman Renang

2.3 Visi dan Misi

Teman Renang memiliki visi untuk menjadi kelas dan pusat pelatihan renang yang profesional, aman, dan terpercaya dalam mengembangkan keterampilan renang serta meningkatkan kesadaran keselamatan air bagi masyarakat.

Untuk mewujudkan visi tersebut, Teman Renang memiliki misi menyediakan program latihan renang yang terstruktur dan sesuai dengan tingkat kemampuan peserta, didukung oleh pelatih renang yang kompeten dan profesional, menciptakan lingkungan latihan yang nyaman, bersih, dan mengutamakan keselamatan, mendukung peningkatan keterampilan berenang, kebugaran fisik, serta kepercayaan diri peserta, serta mengembangkan layanan berbasis teknologi informasi guna mempermudah proses pendaftaran, pengelolaan data peserta, dan penyampaian informasi kelas renang.

2.4 Lokasi dan Fasilitas

Teman Renang berlokasi Apartemen Menara Latumenten, 1, RT.1/RW.1, Jelambar Baru, Kec. Grogol petamburan, Kota Jakarta Barat, Daerah Khusus Ibukota Jakarta 11460 Fasilitas yang tersedia antara lain:

1. Kolam renang standar latihan (sesuai ukuran dan kedalaman untuk pemula hingga atlet)
2. Lintasan renang dengan lane rope (untuk pengaturan sesi dan disiplin latihan)
3. Peralatan latihan renang (kickboard, pull buoy, fins, hand paddle)
4. Ruang bilas dan ruang ganti yang bersih serta nyaman
5. Loker/tempat penyimpanan barang pribadi yang aman
6. Area parkir yang memadai

2.5 Struktur Organisasi

Struktur organisasi Teman Renang masih sederhana dan terdiri dari beberapa peran utama:

1. Pemilik/Pengelola: bertanggung jawab mengatur seluruh kegiatan operasional Teman Renang.
2. Instruktur/Pelatih: memberikan arahan latihan kepada member.
3. Staf/Admin: membantu administrasi, membership, dan kebutuhan operasional harian.

2.6 Kegiatan Usaha

Kegiatan utama Teman Renang meliputi:

1. Menyediakan fasilitas latihan renang.
2. Melayani pendaftaran member baru.
3. Mendampingi member dalam latihan.
4. Menjaga kebersihan dan kenyamanan fasilitas.
5. Memberikan informasi terkait membership dan layanan Teman Renang.

2.7 Keterkaitan Kerja Praktek dengan Kegiatan Perusahaan

Kegiatan Kerja Praktek yang dilakukan mahasiswa memiliki keterkaitan langsung dengan kebutuhan digitalisasi layanan di Teman Renang.

Melalui pembuatan website profile dan layanan pendaftaran member, mahasiswa membantu perusahaan dalam:

1. Menyediakan media informasi yang lebih profesional.
2. Memperluas jangkauan promosi Teman Renang secara digital.
3. Meningkatkan efektivitas pencatatan data member.
4. Mengurangi ketergantungan pada proses manual.
5. Mendukung operasional Teman Renang menjadi lebih modern dan efisien.

Dengan demikian, kegiatan Kerja Praktek ini memberikan manfaat bagi kedua belah pihak: mahasiswa memperoleh pengalaman praktis dalam pengembangan web, sementara Teman Renang mendapatkan sistem informasi sederhana yang dapat membantu kelancaran operasional usaha.

BAB III PEMBAHASAN

3.1 Landasan Teori

1. Sistem Informasi

Sistem informasi merupakan suatu kesatuan komponen yang saling terhubung untuk mengumpulkan, mengolah, menyimpan, dan menyebarkan informasi guna mendukung aktivitas operasional maupun pengambilan keputusan di dalam organisasi.

Sistem informasi merupakan sekumpulan prosedur yang saling terintegrasi dan bekerja sama untuk mengelola data dalam suatu organisasi, mendukung kegiatan operasional dan strategis, serta menyajikan informasi yang diperlukan oleh berbagai pihak terkait (Muzakkir et al., 2025).

Sistem informasi bertujuan meningkatkan efektivitas kerja, mempercepat proses administrasi, serta meminimalisir kesalahan yang sering terjadi pada pencatatan manual.

Dalam konteks usaha kecil seperti pusat kebugaran, penerapan sistem informasi mampu membantu proses pencatatan data member menjadi lebih terstruktur dan mudah ditelusuri kembali.

Digitalisasi ini juga memudahkan penyampaian informasi kepada pelanggan tanpa harus selalu berinteraksi secara langsung.

2. Website

Website adalah kumpulan halaman yang berisi informasi dan dapat diakses melalui jaringan internet menggunakan browser. Website dapat digunakan sebagai media penyampaian informasi, promosi, dan layanan interaktif bagi pengguna.

Pemanfaatan website dalam pendaftaran online memungkinkan calon pendaftar mengisi dan mengirimkan data secara digital tanpa kehadiran fisik, sehingga mempercepat proses registrasi serta mengurangi potensi kesalahan dalam pencatatan data (Rosidah & Nugraha, 2025).                                                                          

Dalam dunia bisnis, website berperan penting sebagai identitas digital usaha dan menjadi sarana bagi pelanggan untuk memperoleh informasi secara cepat.

Website memungkinkan pemilik usaha menampilkan profil, fasilitas, galeri, jadwal operasional, serta menyediakan layanan pendaftaran melalui formulir online.

Dengan demikian, website tidak hanya menjadi media promosi, namun juga mendukung alur administrasi agar lebih efisien dan terorganisir.

3. Digitalisasi Usaha

Digitalisasi usaha adalah proses pengalihan kegiatan yang sebelumnya dilakukan secara manual menuju sistem berbasis teknologi informasi. Digitalisasi membuat proses operasional menjadi lebih cepat, akurat, dan dapat diakses dari mana saja.

Digitalisasi dan penerapan sistem informasi berbasis web membantu UMKM dalam meningkatkan aksesibilitas informasi serta memperluas jangkauan pemasaran usaha secara online (Nusamandiri et al., 2018).

Dalam usaha mikro dan kecil, penggunaan teknologi digital terbukti mampu meningkatkan kualitas penyimpanan data, memperluas jangkauan pemasaran, dan mengurangi ketergantungan pada pencatatan manual.

Implementasi sistem informasi berbasis web pada UMKM dapat meningkatkan kinerja penjualan, memberikan informasi real-time kepada pelanggan, serta menjangkau target pasar lebih luas (Albalkhi & Komalasari, 2024).

Hal ini sangat relevan bagi usaha seperti Teman Renang yang memerlukan pengelolaan data member, pendaftaran layanan, serta penyampaian informasi secara konsisten kepada pelanggan.

4. Pendaftaran Online

Pendaftaran online adalah proses registrasi yang dilakukan melalui perangkat digital tanpa memerlukan formulir fisik. Pendaftaran online berbasis web dirancang untuk mempermudah proses pendaftaran pengguna tanpa harus melakukan proses manual di lokasi, serta membantu pengelola dalam pengolahan data yang lebih efisien dan efektif (Putri et al., 2025).

Sistem pendaftaran online memfasilitasi pengguna agar dapat memasukkan data kapan saja dan dari mana saja, sedangkan pengelola dapat menerima dan memproses data secara otomatis.

Keunggulan pendaftaran online antara lain:

1. mengurangi kesalahan pencatatan,
2. mempercepat alur administrasi,
3. memudahkan penyimpanan data dalam format digital,
4. meningkatkan kenyamanan user karena tidak harus datang langsung ke lokasi.

Sistem ini sangat sesuai untuk usaha seperti Teman Renang yang membutuhkan proses pendaftaran yang praktis dan cepat.

5. Basis Data

Basis data merupakan sekumpulan data yang disimpan secara sistematis agar dapat diakses kembali dengan mudah dan cepat.

Dalam pengembangan sistem informasi, basis data digunakan untuk menyimpan informasi penting secara terstruktur sehingga mempermudah pengolahan dan pencarian data.

Meskipun website yang dibuat pada kerja praktek ini masih menggunakan localstorage, perancangan basis data tetap diperlukan untuk menggambarkan bagaimana struktur penyimpanan data dibentuk jika sistem dikembangkan lebih lanjut menggunakan database server, seperti MySQL.

6. HTML, CSS, Java Script

a. HTML (HyperText Markup Language)

HTML adalah bahasa markup yang digunakan untuk membangun struktur dasar sebuah halaman web. HTML bekerja dengan menggunakan tag atau elemen yang berfungsi sebagai blok penyusun tampilan, seperti paragraf, gambar, heading, tabel, dan navigasi. Setiap elemen memiliki fungsi khusus untuk mengatur konten agar dapat ditampilkan oleh browser secara teratur.

HTML tidak bersifat pemrograman, tetapi merupakan kerangka yang menampung seluruh konten sebelum diberikan gaya dan interaksi. Browser membaca HTML dari atas ke bawah, kemudian menerjemahkan struktur tersebut menjadi tampilan visual.

b. CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk menentukan tampilan dan desain pada halaman web.

Jika HTML berfungsi sebagai kerangka, maka CSS berperan sebagai pengatur gaya (styling) untuk membuat tampilan website lebih menarik dan terstruktur.

CSS memungkinkan pemisahan antara struktur (HTML) dan tampilan (CSS), sehingga kode menjadi lebih rapi dan mudah dikelola.

Dalam pengembangan modern, CSS juga sering dipadukan dengan framework, seperti Bootstrap atau Tailwind, untuk mempercepat pembuatan desain.

c. JavaScript (JS)

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas pada website.

Dengan JavaScript, sebuah halaman yang sebelumnya hanya bersifat statis dapat menjadi dinamis dan responsif terhadap tindakan pengguna.

JavaScript berperan sebagai “otak” yang menjalankan logika sistem, sedangkan HTML adalah kerangkanya, dan CSS mengatur tampilannya.

3.2 Gambaran Umum Kegiatan Kerja Praktek

Kegiatan Kerja Praktek (KP) dilaksanakan selama kurang lebih 3 bulan di Teman Renang, sebuah tempat kebugaran yang menyediakan fasilitas latihan dan layanan keanggotaan (member) bagi masyarakat.

Kegiatan kerja praktek ini difokuskan pada perancangan dan pembuatan website profile dan layanan member sebagai sarana digitalisasi informasi dan administrasi di Teman Renang.

Website yang dikembangkan bertujuan untuk menggantikan penyampaian informasi dan pencatatan data member yang sebelumnya masih dilakukan secara manual.

Melalui website ini, informasi mengenai profile Teman Renang, fasilitas, galeri, jam operasional, serta pendaftaran member dapat disajikan secara terstruktur dan mudah diakses oleh calon member.

Selain itu, website ini juga membantu pihak pengelola dalam mengelola data pendaftaran member secara lebih rapi dan efisien.

Fitur utama yang dikembangkan dalam website Teman Renang meliputi:

1. Halaman beranda sebagai tampilan awal informasi
2. Halaman profile Teman Renang
3. Halaman galeri fasilitas Teman Renang
4. Halaman jam operasional Teman Renang
5. Formulir pendaftaran member secara online
6. Halaman admin untuk menampilkan data pendaftaran member

Website ini dibangun menggunakan teknologi:

1. Frontend: HTML, CSS, dan JavaScript
2. Penyimpanan data: Localstorage (tanpa database server)
3. Editor pengembangan: Visual Studio Code

Website bersifat informatif dan administratif, digunakan sebagai media promosi digital serta alat bantu pengelolaan data member bagi pengelola Teman Renang.

Dengan adanya website ini, diharapkan proses penyampaian informasi dan pendaftaran member menjadi lebih efektif, terorganisir, serta mendukung peningkatan profesionalitas layanan Teman Renang.

3.3 Analisis Sistem Saat Ini

Analisis sistem yang berjalan diperlukan untuk memahami kondisi operasional Teman Renang sebelum adanya pengembangan sistem berbasis website.

Berdasarkan hasil observasi, kegiatan administrasi dan penyampaian informasi masih dilakukan secara manual tanpa dukungan media digital. Beberapa temuan utama di lapangan adalah:

1. Penyampaian informasi masih bersifat langsung, baik melalui percakapan maupun pesan WhatsApp. Kondisi ini membuat calon member sulit memperoleh informasi lengkap tanpa mendatangi lokasi.
2. Proses pendaftaran dilakukan secara konvensional dengan mencatat identitas member ke dalam buku tulis. Cara ini menyulitkan proses pencarian data dan rawan terjadi kesalahan pencatatan.
3. Pengelolaan data belum terdokumentasi secara digital, sehingga memakan waktu lebih banyak saat melakukan rekap atau pelacakan kembali informasi penting.
4. Media promosi resmi belum tersedia, sehingga jangkauan informasi kepada masyarakat hanya bergantung pada komunikasi pribadi atau penyebaran informal.

Dari kondisi tersebut dapat disimpulkan bahwa sistem manual yang diterapkan saat ini belum efektif dalam mendukung kebutuhan administrasi maupun penyebaran informasi kepada masyarakat.

3.4 Analisis Sistem yang Diusulkan

Sebagai solusi dari permasalahan sistem manual, dirancang sebuah website yang berfungsi sebagai sarana informasi sekaligus alat bantu administrasi di Teman Renang. Sistem yang diusulkan memiliki beberapa fitur utama, antara lain:

1. Website sebagai profil usaha, yang memuat informasi mengenai layanan, fasilitas, jam buka, galeri, dan kontak sehingga dapat diakses kapan pun oleh calon member.
2. Formulir pendaftaran online, yang memungkinkan calon member mengisi data secara mandiri tanpa perlu datang langsung ke tempat Teman Renang.
3. Penyimpanan data menggunakan Localstorage, sehingga setiap pendaftaran yang dikirim akan secara otomatis tersimpan dalam sistem dan dapat dilihat kembali oleh pengelola.
4. Halaman admin, yang berfungsi untuk melihat daftar pendaftar dalam format tabel sehingga mempermudah manajemen data.
5. Media promosi digital, yang membantu memperluas jangkauan pemasaran, khususnya karena lokasi Teman Renang cukup terpencil dan membutuhkan sarana promosi yang lebih efektif.

Melalui sistem ini, Teman Renang dapat meningkatkan efisiensi administrasi, memperbaiki penyajian informasi, dan membangun identitas digital yang lebih profesional.

3.5 Perancangan Sistem

Perancangan sistem disusun berdasarkan hasil analisis kebutuhan dan kondisi pelayanan yang berjalan di Teman Renang.

Tahap ini bertujuan untuk menggambarkan sistem yang akan dikembangkan agar sesuai dengan kebutuhan pengguna dan dapat diimplementasikan dengan baik.

Perancangan meliputi alur proses pendaftaran member, interaksi pengguna dengan sistem, serta perancangan struktur data yang digunakan.

Perancangan sistem digambarkan menggunakan beberapa model diagram, yaitu Use Case Diagram, Activity Diagram, Sequence Diagram, dan Entity Relationship Diagram (ERD).

Diagram-diagram tersebut digunakan sebagai acuan dalam proses pembangunan website profile dan layanan member Teman Renang.

3.5.1 Use Case Diagram

Use Case Diagram digunakan untuk menggambarkan hubungan antara aktor dengan sistem serta fungsi-fungsi yang dapat dijalankan oleh masing-masing aktor.

Pada website Teman Renang, terdapat dua aktor utama yang berinteraksi dengan sistem, yaitu Pengunjung dan Admin. 

Diagram ini menunjukkan  Pengunjung dapat mengakses informasi Teman Renang serta melakukan pendaftaran member secara online. Admin berperan mengelola dan melihat data pendaftaran melalui halaman khusus. 

3.5.2 Activity Diagram

Activity Diagram menggambarkan alur aktivitas dalam website Teman Renang, mulai dari pengunjung mengakses informasi dan melakukan pendaftaran member hingga data diproses dan disimpan oleh sistem, serta dapat dilihat oleh admin melalui halaman admin.

Diagram ini memastikan setiap proses yang dilakukan oleh pengunjung dan admin dalam sistem memiliki alur yang jelas dan terstruktur, sehingga implementasi website dapat dibangun sesuai dengan urutan kerja yang telah dirancang.

3.5.3 Squence Diagram

Sequence Diagram digunakan untuk menggambarkan komunikasi antar komponen sistem:

3.5.4 Class Diagram

3.5.5 Entity Relationship Diagram

Entity Relationship Diagram (ERD) digunakan untuk menggambarkan struktur data serta hubungan antar entitas pada sistem pendaftaran Teman Renang.

ERD ini menunjukkan keterkaitan antara entitas user, paket, jadwal, pendaftaran, dan membership sebagai komponen utama sistem.

3.5.6 Transformasi ERD ke LRS Diagram

Transformasi ERD ke LRS dilakukan untuk mengubah model konseptual menjadi model logis berbentuk tabel relasional.

Proses transformasi ini bertujuan menghasilkan struktur data yang terorganisir, konsisten, dan siap diimplementasikan dalam basis data.

3.5.7 Logical Record Structure Diagram

Logical Record Structure (LRS) menggambarkan struktur tabel secara logis yang digunakan sebagai acuan dalam pembuatan basis data agar penyimpanan data menjadi efisien, terstruktur, dan mudah dikembangkan sesuai kebutuhan sistem.

3.6 Perancangan Basis Data

Perancangan basis data dilakukan untuk memastikan bahwa data yang digunakan dalam sistem pendaftaran member Teman Renang dapat tersimpan dengan baik, terstruktur, serta mudah diolah oleh admin.

Tahap ini mencakup pembuatan Entity Relationship Diagram (ERD), Transformasi ERD ke Logical Record Structure (LRS), penyusunan LRS, serta Spesifikasi Basis Data sebagai pedoman implementasi.

3.6.1 Spesifikasi Basis Data

Bagian ini menjelaskan detail setiap kolom dalam tabel, tipe data yang digunakan, serta fungsinya. Spesifikasi ini menjadi acuan ketika sistem dikembangkan menggunakan database, seperti MySQL atau PostgreSQL.

1. Spesifikasi Tabel Admin

Nama Atribut	Tipe Data	Panjang	Keterangan
id_admin	INT	11	Primary Key, Auto Increment
username	VARCHAR	50	Nama pengguna admin
password	VARCHAR	255	Password tersimpan hash

Tabel 3.1  Spesifikasi tabel admin

2. Spesifikasi Tabel User

Nama Atribut	Tipe Data	Panjang	Keterangan
id_member	INT	11	Primary Key, Auto Increment
nama	VARCHAR	100	Nama lengkap
umur	INT	15	Umur member
no_telepon	VARCHAR	20	Nomor WA / HP
Email	Text	—	Email member
Paket_member	VARCHAR	50	bulanan
catatan	VARCHAR	30	Note member

Tabel 3.2  Spesifikasi tabel user

3.7 Proses Implementasi

Tahap implementasi merupakan proses menerjemahkan hasil perancangan ke dalam bentuk website yang dapat berjalan sesuai dengan kebutuhan pengguna.

Pada tahap ini, seluruh rancangan struktur halaman, desain tampilan, serta alur interaksi sistem diwujudkan ke dalam kode program yang dijalankan melalui browser.

Penulis menggunakan Visual Studio Code (VSCode) sebagai code editor utama karena aplikasi tersebut menyediakan lingkungan kerja yang lengkap, ringan, dan mendukung berbagai ekstensi yang memudahkan proses pengembangan website. 

Selain itu, teknologi utama yang digunakan pada tahap implementasi meliputi HTML sebagai dasar struktur halaman, CSS untuk mengatur desain tampilan, dan JavaScript untuk menangani interaksi pengguna serta penyimpanan data menggunakan localstorage.

Seluruh komponen ini diintegrasikan secara bertahap agar menghasilkan website yang berfungsi dengan baik dan mudah dipahami oleh pengguna.

3.8 Pembuatan Struktur Dasar Halaman

Pada tahap awal implementasi, penulis terlebih dahulu membuat struktur dasar setiap halaman website menggunakan HTML. Struktur ini mencakup elemen-elemen penting, seperti header, navigasi menu, konten utama, dan footer.

Tujuan dari pembuatan struktur dasar ini adalah memastikan setiap halaman memiliki kerangka yang rapi, konsisten, dan mudah dipelajari oleh pengguna.

Navigasi pada website dirancang agar sederhana dan mudah diakses, sehingga pengunjung dapat berpindah dari satu halaman ke halaman lain tanpa hambatan.

Setiap halaman seperti index, profile, galeri, jadwal, daftar, kontak, dan admin dibuat dalam bentuk file HTML terpisah yang saling terhubung melalui menu navigasi.

3.8.1 Desain Tampilan (CSS)

Setelah struktur dasar halaman selesai dibuat, tahap berikutnya adalah mengatur tampilan visual menggunakan CSS.

Pada tahap ini, penulis menyusun desain yang sederhana namun tetap informatif agar website dapat digunakan oleh berbagai kalangan tanpa kesulitan.

Pengaturan gaya mencakup:

1. pemilihan warna yang tidak terlalu mencolok,
2. penyesuaian ukuran font untuk meningkatkan keterbacaan,
3. pengaturan jarak antar elemen (margin dan padding),
4. serta pengaturan tata letak agar tampilan tetap rapi pada perangkat mobile (responsive design).

Tujuan dari tahap ini adalah menghasilkan tampilan yang bersih, nyaman dilihat, dan profesional, sehingga pengunjung dapat memperoleh pengalaman penggunaan yang baik.

3.8.2 Interaksi Website

Tahap ini merupakan bagian yang paling penting dalam implementasi website karena berhubungan langsung dengan logika sistem, khususnya pada fitur pendaftaran member dan sistem penyimpanan data.

JavaScript digunakan untuk:

1. Memproses input dari formulir pendaftaran
2. Menyimpan data pendaftar menggunakan localstorage
3. Mengambil dan menampilkan data pada halaman admin
4. Mengatur validasi sederhana pada formulir

Dengan menggunakan localstorage, website tidak memerlukan server atau database eksternal, sehingga lebih ringan dan mudah diterapkan untuk usaha yang masih dalam tahap pengembangan seperti Teman Renang.

Data yang tersimpan pada localstorage dapat diakses kembali kapan saja melalui halaman admin, sehingga memudahkan pengelola dalam melihat daftar pendaftar.

Pada tahap ini pula, penulis membuat halaman admin yang berfungsi menampilkan data pendaftar dalam bentuk tabel.

Tabel ini menampilkan informasi seperti nama, nomor WhatsApp, paket yang dipilih, dan alamat, sesuai data yang diinputkan oleh pengguna.

3.9 Dokumentasi Tampilan Website (User interface)

Dokumentasi tampilan website dilakukan untuk menunjukkan hasil implementasi antarmuka yang telah dirancang sebelumnya.

Setiap halaman yang ada pada website ditampilkan dalam bentuk screenshot guna memberikan gambaran visual mengenai fungsi dan desain dari masing-masing komponen yang telah dikembangkan.

Dokumentasi ini juga berfungsi sebagai bukti bahwa sistem telah berjalan sesuai perancangan.

1. Halaman Beranda & Profile (Home)

Halaman beranda menjadi titik awal ketika pengguna mengakses website Teman Renang. Pada halaman ini ditampilkan informasi singkat mengenai Teman Renang, seperti gambaran umum usaha, tujuan, serta navigasi menuju halaman lain.

Desain dibuat ringkas dan mudah dipahami agar pengunjung langsung memperoleh informasi inti tanpa perlu melakukan banyak klik.

2. Halaman Galeri

Halaman galeri menampilkan kumpulan foto fasilitas dan peralatan yang tersedia di Teman Renang.

Fitur ini dibuat dengan tujuan memberikan gambaran visual kepada calon member agar mereka dapat memahami kondisi Teman Renang secara lebih nyata.

Tampilan galeri dirancang sederhana namun tetap menarik dengan susunan gambar yang rapi dan mudah diakses.

3. Halaman Jam Operasional

Halaman ini berfungsi menampilkan informasi mengenai jam buka dan tutup Teman Renang. Sebelumnya, informasi ini hanya disampaikan secara lisan atau melalui pesan singkat, sehingga berpotensi tidak tersampaikan dengan baik.

Dengan adanya halaman jam operasional, informasi dapat dilihat kapan saja secara jelas dan terstruktur.

4. Formulir Pendaftaran Member

Halaman formulir pendaftaran disediakan untuk mempermudah calon member mengisi data keanggotaan secara daring. Pengguna cukup mengisi data seperti nama, kontak, alamat, dan paket yang dipilih.

Desain formulir dibuat sederhana dengan tujuan agar proses pengisian berlangsung cepat dan tidak membingungkan.

5. Halaman Admin

Halaman admin merupakan bagian yang hanya diakses oleh pengelola Teman Renang. Pada halaman ini ditampilkan data member yang telah diinput melalui formulir pendaftaran.

Informasi pendaftar disajikan dalam bentuk tabel agar mudah dibaca dan dikelola. Penggunaan halaman admin ini membantu mempermudah proses pencatatan dan mengurangi risiko salah informasi pada pencatatan manual.

BAB IV PENUTUP

4.1 Kesimpulan

Setelah melaksanakan kegiatan Kerja Praktek di Teman Renang dan menyelesaikan proses perancangan serta pembuatan website profile dan layanan member, maka dapat disimpulkan beberapa hal sebagai berikut:

1. Website yang dikembangkan mampu menyajikan informasi mengenai Teman Renang dengan lebih jelas, terstruktur, dan mudah diakses oleh pengguna.
2. Fitur pendaftaran member secara online membantu calon member melakukan registrasi dengan lebih praktis tanpa perlu datang langsung ke lokasi.
3. Pemanfaatan localstorage sebagai media penyimpanan sementara sudah cukup mendukung kebutuhan dasar penyimpanan data pada usaha kecil yang belum memiliki sistem basis data tersendiri.
4. Halaman admin yang dibuat memudahkan pengelola dalam meninjau serta mengelola data pendaftar secara sederhana dan teratur.

Secara keseluruhan, kegiatan Kerja Praktek ini telah berjalan dengan baik dan memenuhi tujuan yang direncanakan.

4.2 Saran

Untuk pengembangan sistem di masa mendatang, beberapa saran yang dapat dipertimbangkan adalah:

1. Menggunakan database dan backend agar penyimpanan data menjadi lebih aman, terkelola, dan dapat diakses dalam jangka panjang.
2. Meningkatkan keamanan halaman admin, misalnya dengan sistem login yang lebih kompleks dan pengaturan akses bagi beberapa pengguna.
3. Menambahkan fitur pembayaran online, sehingga proses pendaftaran dan pembayaran membership dapat dilakukan langsung melalui website.

---

Penulis:
1. Muhammad Iskandar (211011450214)
2. Izi Mustamar Rizky (211011450575)
3. Sunata (211011450145)
Mahasiswa Prodi Teknik Informatika, Universitas Pamulang

---

Dosen Pengampu: Joko Priambodo, S.Kom., M.M., M.Kom.

---

Editor: Siti Sajidah El-Zahra
Bahasa: Rahmat Al Kafi

---

DAFTAR PUSTAKA

Albalkhi, A. N., & Komalasari, R. (2024). SisInfo Sistem Informasi Penjualan (E-Commerce) UMKM DANISA Collection SisInfo. Jurnal Sistem Informasi Dan Informatika, 6(1), 34–43.

Harjoseputro, Y., Adi, T., Sidhi, P., Informatika, S., Indusri, F. T., Atma, U., & Yogyakarta, J. (2021). Pemanfaatan Sistem Informasi Pada Usaha Kecil Menengah Untuk Pencatatan dan Pelaporan Transaksi Penjualan. Dinamisia, 5(5), 1305–1317.

Muzakkir, M., Surdin, I., & Ishak, I. (2025). Rancang Bangun Dan Implementasi Mobile Web Sebagai Sarana Informasi Pemberdayaan Masyarakat Desa Nain Kecamatan Pagimana. Jurnal Ilmiah Sistem Informasi Dan Teknik Informatika (JISTI), 8(1), 133–141. https://doi.org/10.57093/jisti.v8i1.277

Nusamandiri, U., Dirgantara, U., & Suryadarma, M. (2018). SISTEM INFORMASI PENJUALAN KUE BERBASIS WEBPADAUSAHA MIKRO KECIL DAN MENENGAH (UMKM)RUMAH KUE DAN SNACK EDELWEIS. JSI (Jurnal Sistem Informasi), 11, 8.

Putri, D. U., Fachruddin, & Jasmir. (2025). Implementasi Sistem Informasi Pendaftaran Online Berbasis Web Pada SMP S Sinar Bijaksana Guang Ming. Jurnal Informatika Dan Rekayasa Komputer(JAKAKOM), 5(1), 1384–1395. https://doi.org/10.33998/jakakom.2025.5.1.2226

Rosidah, N., & Nugraha, F. (2025). Pemanfaatan Website untuk Digitalisasi Administrasi Penerimaan Siswa Baru dalam Mempermudah Proses Pendaftaran. Explore: Jurnal Sistem Informasi Dan Telematika, 16(1), 32. https://doi.org/10.36448/jsit.v16i1.4030

Santoso, A. B., & Dewi, M. U. (2022). Digitalisasi UMKM untuk Optimalisasi Sistem Informasi dan Integrasi Layanan Aplikasi Website Transaksi Online di Masa Pandemi. Abdidas, 3(1), 198–205.

LAMPIRAN  FOTO

⚡ Baca Lebih Cepat Artikel MMI di Ponsel Anda!
Ikuti Channel WhatsApp
Media Mahasiswa Indonesia (MMI):
KLIK DI SINI