Tugas Besar Proyek Teknologi Web - Laporan Proyek

PERENCANAAN PEMBUATAN WEB UNTUK MAHASISWA PECINTA ALAM
UNIVERSITAS SEMARANG 1988
Diajukan untuk memenuhi salah satu syarat tugas besar mata kuliah Proyek Teknologi Web
(Yosi Yonata S.T., M.T.)
DISUSUN OLEH:
1221007 SAMUEL OLIVER LIMANJAYA
1221021 AGUNG WILLIAM PRATAMA
1221024 RAON SPIELBERG BEREK
1221026 FERNANDO GILBERTO THENU
DEPARTEMEN SISTEM INFORMASI
INSTITUT TEKNOLOGI HARAPAN BANGSA
BANDUNG
2022
BAB 1 PENDAHULUAN
1.1 Latar Belakang

Pada zaman modern ini, sudah tidak banyak orang yang peduli dengan alam. Padahal
alam merupakan tempat tinggal dan sumber kehidupan bagi seluruh makhluk hidup di bumi. Jika
alam rusak, maka sumber kehidupan pun juga akan rusak atau hilang. Manusia sebagai makhluk
hidup dengan akal yang tinggi, sudah seharusnya menjaga alam agar tempat hidupnya selalu
terjaga dan lestari. Banyak cara yang dapat dilakukan untuk menjaga dan melestarikan alam.
Salah satunya dengan melakukan kegiatan yang berhubungan dengan menjaga dan melestarikan
alam bersama orang lain di dalam organisasi pecinta alam.
Organisasi pecinta alam adalah sekumpulan orang yang memiliki tujuan dan hobi yang
sama pada kegiatan yang berhubungan dengan menjaga dan melestarikan alam. Kegiatan yang
dilakukan tersebut dapat berupa konservasi, susur goa, sosialisasi, reboisasi, dll.
Salah satu organisasi pecinta alam yang sekarang aktif melakukan kegiatan-kegiatan
tersebut adalah Mapala USM 1988 (Mahasiswa Pecinta Alam Universitas Semarang 1988).
Organisasi tersebut dipelopori oleh lima orang mahasiswa yang memiliki persamaan baik dari
hobi maupun tujuan untuk menjaga dan melestarikan alam. Oleh karena itu, mereka menciptakan
komunitas pecinta alam bernama “Mahasiswa Pencinta Alam Politeknik Semarang” pada tanggal
14 Oktober 1987 sebelum diresmikan setahun kemudian melalui surat keputusan yang dibuat
oleh pihak universitas. Pada tahun 1992, nama organisasi ini diubah menjadi “Mahasiswa
Pencinta Alam Universitas Semarang” seiring dengan perubahan nama universitasnya dari
Politeknik Semarang ke Universitas Semarang.
Saat ini, Mapala USM 1988 hanya dikenal oleh lingkungan Universitas Semarang saja
dan belum terlalu dikenal oleh masyarakat luar termasuk komunitas pecinta alam lainnya di
Indonesia. Penyebabnya adalah karena mereka kurang menyebarkan informasi ke masyarakat
luas dalam mempromosikan organisasinya seperti mendokumentasikan kegiatan yang telah
dilakukan, membuka pendaftaran anggota baru, membuka pendaftaran peserta acara yang akan
dilaksanakan, dll.
1-1
BAB 1 PENDAHULUAN
1.2 Rumusan Masalah

1. Mapala USM 1988 mengalami kesulitan untuk menyebarkan informasi terkait
organisasinya kepada masyarakat luas.
2. Mapala USM 1988 mengalami kesulitan untuk melakukan pendataan anggota barunya
serta calon peserta acara pada acara-acara yang akan diadakan.
3. Mapala USM 1988 mengalami kesulitan untuk menampilkan hasil dokumentasi kegiatan
yang telah dilakukan oleh organisasinya.
1.3 Batasan Masalah

Batasan masalah dalam laporan ini berfokus pada pembahasan mengenai Mapala USM
1988 yang meliputi profil Mapala USM 1988, kegiatan yang mereka lakukan, dan struktur
organisasi. Sumber informasi yang didapatkan berasal dari social media mereka dan seorang
narasumber dari pihak Mapala USM 1988.
1.4 Tujuan Proyek

Tujuan dari proyek ini adalah untuk membuat website yang dapat membantu Mapala
USM 1988 dalam memudahkan dirinya mendokumentasikan kegiatan yang telah dilakukan,
mempermudah mahasiswa baru dalam melakukan pendaftaran anggota, mempermudah
pendaftaran calon peserta event pada event yang akan diadakan, serta mempromosikan dirinya
kepada masyarakat di luar kampus.
1.5 Manfaat Proyek

1.5.1 Manfaat untuk Mapala USM 1988
Manfaat yang didapat oleh Mapala USM 1988 antara lain:
1. Memberikan informasi yang lengkap terkait organisasinya.
2. Sebagai alat komunikasi bagi anggota dan pengurus.
3. Dapat dikenal oleh mahasiswa, masyarakat luas, dan organisasi pecinta alam
lainnya.
1-2
BAB 1 PENDAHULUAN
1.5.2 Manfaat untuk Masyarakat

Manfaat yang didapat oleh masyarakat antara lain:
1. Mendapat informasi tentang Mapala USM 1988.
2. Menambah wawasan terkait dengan kegiatan menjaga dan melestarikan alam.
3. Mempermudah komunikasi dengan pengurus dan anggota Mapala USM 1988.
1.5.3 Manfaat untuk Pembuat Website

Manfaat yang didapat oleh pembuat website antara lain:
1. Mendapatkan pengalaman baru terkait pembuatan website.
2. Menambah wawasan terkait organisasi pecinta alam.
3. Melatih logika pemrograman saat pembuatan website.
1-3
BAB 2 LANDASAN TEORI
2.1 Pengertian Alam

Kata alam memiliki pengertian yang luas karena memiliki makna dari angkasa, habitat,
kawasan, langit, hutan, dll. Menurut Kamus Besar Bahasa Indonesia (KBBI) sendiri, kata alam
memiliki beberapa pengertian, yaitu:Segala sesuatu yang ada di langit dan di bumi (seperti bumi,
bintang dan kekuatan).
1. Lingkungan kehidupan bagi makhluk hidup di bumi.
2. Segala sesuatu yang termasuk dalam satu lingkungan (golongan dan sebagainya) serta
dianggap sebagai satu keutuhan.
3. Segala daya (gaya, kekuatan, dan sebagainya) yang menyebabkan terjadinya dan
seakan-akan mengatur segala sesuatu yang ada di dunia ini.
4. Segala sesuatu yang tidak diciptakan oleh manusia.
Dari beberapa pengertian di atas dapat disimpulkan bahwa alam adalah lingkungan yang
menjadi tempat tinggal semua makhluk hidup di bumi. [1] Kata ini juga sering diartikan sebagai
lingkungan alam. Lingkungan alam adalah lingkungan yang terbentuk dari proses alami tanpa
campur tangan manusia seperti pegunungan, sungai, hutan, rawa dan lainnya yang keberadaan
ada di sekitar kita. [2]
2.2 Pengertian Pecinta Alam

Pecinta alam adalah sebuah kelompok yang melakukan kegiatan merawat dan
melestarikan alam. Di Indonesia sendiri, pengertian pecinta alam dapat diartikan sebagai
kelompok yang bergerak di bidang petualangan alam bebas seperti mendaki gunung, ekspedisi ke
belantara, panjat tebing, arung jeram (aktivitas mengarungi derasnya aliran air), menyusuri gua,
penyelaman bawah laut, observasi, dan berpetualang dengan perahu layar.
Kelompok pecinta alam pertama di Indonesia adalah “Perkumpulan Petjinta Alam” yang
diciptakan oleh Awibowo pada Oktober 1953 di Yogyakarta. Sembilan tahun kemudian, istilah
tersebut dipopulerkan oleh para mahasiswa di Universitas Indonesia seperti Soe Hok Gie,
Herman Lantang, Aristides Katoppo, dll. Sejak saat itu, kelompok pecinta alam mengalami
perkembangan yang pesat dan saat ini sudah banyak kelompok pecinta alam yang berdiri di
seluruh Indonesia.
2-1
Kelompok pecinta alam Indonesia memiliki beberapa kode etik dalam melakukan
kegiatannya. Berikut beberapa contohnya:
1. Pecinta alam Indonesia sadar bahwa alam beserta isinya adalah ciptaan Tuhan Yang
Maha Esa.
2. Pecinta alam Indonesia sebagai bagian dari masyarakat Indonesia sadar akan tanggung
jawab kepada Tuhan, bangsa, dan tanah air.
3. Pecinta alam Indonesia sadar bahwa segenap pecinta alam adalah saudara sebagai
makhluk yang mencintai alam sebagai anugerah yang Tuhan Yang Maha Esa. [3]
2.3 Pengertian Website

Website adalah kumpulan halaman-halaman dalam suatu domain yang memuat berbagai
informasi data, teks, gambar atau animasi, konten, ilustrasi serta video dan suara baik itu bersifat
statis serta dinamis yang bisa dibaca dan juga dilihat oleh pengguna (user) melalui sebuah mesin
pencarian/search engine. Kumpulan halaman-halaman tadi membentuk satu rangkaian bangunan
yang saling berkaitan, masing-masing dihubungkan dengan jaringan halaman atau hyperlink.
Website secara umum dapat diakses dalam tampilan halaman utama (homepage) menggunakan
sebuah aplikasi yaitu, browser engine dengan cara menuliskan URL (Uniform Resource
Locator). Halaman utama website (homepage) memuat beberapa halaman lainnya atau web
turunan yang saling terhubung antara satu halaman dengan halaman web lainnya. [4]
Sejarah website pertama kali dimulai dari seorang ilmuwan yang berasal di Inggris yang
bernama Tim Berners-Lee, tujuan awal website dibuat adalah untuk memudahkan para peneliti di
tempat kerjanya untuk mendapatkan atau bertukar informasi. Website baru dapat diakses oleh
publik pada tanggal 30 April 1993 melalui pengumuman dari CERN (The European
Organization for Nuclear Research) yang menyatakan bahwa website dapat digunakan secara
gratis oleh semua orang di seluruh dunia. Pada awalnya, website masih bersifat statis namun kini
website telah lebih dinamis dan user friendly. Dalam tahap pembuatan website ditulis dalam
format HTML (Hyper Text Markup Language) yang bisa di akses melalui HTTP (Hypertext
Transfer Protocol). HTTP adalah suatu protokol yang menyampaikan berbagai informasi dari
server website yang ditampilkan kepada user atau pengguna melalui web browser. [5]
2-2
2.4 Pengertian HTML

Banyak orang yang mengira bahwa HTML atau HyperText Markup Language
merupakan salah satu bahasa pemrograman namun sebenarnya HTML merupakan bahasa
markup (bahasa penandaan yang terdiri dari kumpulan tag) atau format untuk halaman web yang
digunakan untuk membuat dan menyusun struktur sebuah website. [6]
HTML diciptakan oleh seorang fisikawan di lembaga penelitian CERN bernama Tim
Berners-Lee. Pada saat itu perusahaan mengalami kesulitan untuk mengakses dokumen antar
karyawan oleh karena itu dia membuat proposal mengenai sistem hypertext berbasis internet
pada tahun 1989. Berdasarkan dokumen berjudul “HTML Tags” pada awalnya jumlah tag pada
HTML sebanyak 18 tag namun kini telah berjumlah 250 tag. Perkembangan HTML juga diiringi
dengan hadirnya world wide web agar website dapat diakses oleh banyak orang. Versi terbaru
dari HTML adalah HTML 5.0 yang memungkinkan user untuk menambahkan video dan audio
pada websitenya. [7]
HTML terdiri dari tiga komponen yaitu tag, elemen dan atribut. Tag adalah tanda awal
dan akhir dalam perintah HTML yang nanti dibaca oleh web browser sedangkan elemen adalah
keseluruhan kode yang terdiri dari tag awal, isi tag dan tag akhir dan atribut adalah informasi
tambahan yang ditulis di dalam elemen untuk menjelaskan tag pada elemen. Dengan
menggunakan HTML user dapat membuat heading, paragraf, tabel dan list, memasukan gambar,
hyperlink serta link pada website, manipulasi teks dll. [8]
2.5 Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa pengkodean yang mengatur desain tampilan
website. CSS digunakan untuk menentukan style dari elemen-elemen HTML serta
mempersingkat penulisannya, seperti elemen font, color, text, dan table. Penggunaan yang
paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML. [9]
Dahulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman HTML
dan CSS memiliki keterkaitan yang erat karena HTML berfungsi sebagai fondasi dasar dari struktur
halaman web dan CSS sebagai pengatur tampilan/penghiasnya. CSS pertama kali muncul seiring
hadirnya Standard Generalized Markup Language (SGML) pada tahun 1970an dengan format
dasarnya diciptakan oleh Hakon Wium Lie berserta Bert Bos pada Oktober 1994.
2-3
Pada tahun 1996, CSS secara resmi dipublikasikan ke publik dengan bantuan temannya bernama
Thomas Reardon dari perusahaan Microsoft.
Terdapat 4 cara dalam memasangkan CSS pada dokumen HTML, yaitu:
1. Inline
Pemasangan dilakukan dengan memasangkan langsung style pada tag HTML Cara ini
hanya berefek pada tag HTML yang sedang ditulis, sehingga diperlukan pengulangan
penulisan untuk tag sejenis lainnya.
2. Internal
Pemasangan dilakukan dengan mendefinisikan style pada bagian head HTML. Efek dari
cara ini akan berlaku untuk seluruh isi dokumen HTML saat ini.
3. Eksternal
Pemasangan dilakukan dengan mendefinisikan style CSS pada file yang terpisah dari file
HTML. File CSS tersebut dihubungkan dengan file HTML menggunakan tag link
pada bagian head HTML. Efek dari cara ini berlaku untuk semua file HTML yang
memanggil file CSS-nya, sehingga file CSS yang pernah dibuat dapat dipakai ulang
untuk file HTML yang berbeda.
4. Import
Pemasangan dilakukan dengan mengimpor file CSS yang ada di internet dengan
menuliskan URL-nya. Efek dari cara ini sama seperti cara external.
2.6 Pengertian JavaScript

JavaScript adalah bahasa pemrograman yang populer di kalangan programmer terutama
dalam pengembangan website agar tampilannya lebih dinamis dan interaktif dengan
menggunakan logika pemrograman. Walaupun memiliki kemiripan nama dengan bahasa
pemrograman Java, namun JavaScript tidak memiliki hubungan apapun dengan Java. JavaScript
termasuk kategori scripting language yang memungkinkan kode yang ditulis tidak perlu
dikompilasi agar dapat dijalankan. Selain itu, JavaScript dibuat pada sisi server atau web-server
dan dieksekusi atau di dijalankan pada sisi web-browser atau client.
JavaScript diciptakan oleh seorang programmer dari perusahaan Netscape bernama
Brendan Eich pada tahun 1995. Pada awalnya, penamaan JavaScript sering diubah mulai dari
Mocha, Mona hingga LiveScript sebelum akhirnya menggunakan nama JavaScript hingga saat
2-4
ini. Versi awal dari JavaScript hanya digunakan oleh karyawan NetScape dan memiliki
fungsionalitas yang terbatas. [10] Setelah itu, JavaScript distandarisasi oleh EMCA (European
Computer Manufacturers Association) dengan versi yang banyak digunakan dan didukung oleh
web browser saat ini yaitu ECMAScript 3 dan versi terbaru yaitu ECMAScript 9 pada tahun
2018. [11]
Terdapat 2 cara dalam memasangkan JavaScript pada HTML:
1. Internal
Pemasangan dilakukan dengan mendefinisikan script pada bagian head HTML. Efek dari
cara ini akan berlaku untuk seluruh isi dokumen HTML saat ini.
2. Eksternal
Pemasangan dilakukan dengan mendefinisikan script JavaScript pada file yang terpisah
dari file HTML. File JavaScript tersebut dihubungkan dengan file HTML menggunakan tag
link pada bagian head HTML. Efek dari cara ini berlaku untuk semua file HTML yang
memanggil file JavaScript-nya, sehingga file JavaScript yang pernah dibuat dapat dipakai
ulang untuk file HTML yang berbeda.
2-5
BAB 3 ANALISIS DAN PERANCANGAN
3.1 Analisis
3.1.1 Profil Organisasi
Mapala Universitas Semarang 1988 atau Mapala USM 1988, adalah sebuah organisasi
pecinta alam yang dipelopori oleh lima orang mahasiswa Politeknik Semarang (sekarang
bernama Universitas Semarang) yang memiliki persamaan baik dari hobi maupun tujuan untuk
menjaga dan melestarikan alam. Dari sana mereka menciptakan komunitas pecinta alam bernama
“Mahasiswa Pencinta Alam Politeknik Semarang” pada tanggal 14 Oktober 1987 sebelum
diresmikan setahun kemudian melalui surat keputusan yang dibuat oleh pihak universitas dengan
pemimpin pertamanya yang bernama Ir. Widjatmoko. Pada tahun 1992, nama organisasi ini
diubah menjadi “Mahasiswa Pencinta Alam Universitas Semarang” seiring dengan perubahan
nama universitasnya dari Politeknik Semarang ke Universitas Semarang.
Saat ini, Mapala USM telah memasuki tahun ke-34 dan tetap konsisten dalam melakukan
kegiatan di alam bebas. Pada September 2021 kemarin, Mapala USM mengangkat Dennis
Bergkamp sebagai ketua umum yang menjabat dari periode tahun 2021 hingga tahun 2022.
Logo Mapala USM 1988 dapat dilihat pada Gambar 3.1 di bawah ini:
Gambar 3.1 Logo Mapala USM 1988
3-1
3.1.1.1 Visi dan Misi Organisasi

3.1.1.1.1 Visi Organisasi
Berikut ini adalah visi dari Mapala USM 1988:
1. Menjadikan Mapala USM 1988 yang unggul dan berkualitas di lingkungan
universitas dan luar universitas.
2. Mengembangkan intelektualitas demi kemajuan organisasi yang mandiri dan
berintegritas.
3.1.1.1.2 Misi Organisasi
Berikut ini adalah misi dari Mapala USM 1988:
1. Menjalankan organisasi sesuai tata kelola yang baik dan harmonis.
2. Mengatur sumber daya manusia yang mampu bertindak kritis dan berpikir
universal.
3. Menyelenggarakan kegiatan yang mampu meningkatkan keterampilan untuk
memupuk, ketahanan fisik, mental, serta kemandirian anggota.
4. Memiliki kemampuan pendanaan yang berkelanjutan untuk membangun organisasi
dengan sarana dan prasarana penunjang kegiatan.
5. Membangun hubungan baik yang saling menguntungkan dengan pihak internal dan
eksternal Mapala USM 1988.
3.1.1.2 Tujuan Organisasi
Berikut ini adalah tujuan dari Mapala USM 1988:
1. Membentuk anggota Mapala USM 1988 agar memiliki mental, moral budi pekerti,
kecerdasan dan keterampilan yang tinggi, taat dalam beragama serta sehat secara
jasmani.
2. Membentuk anggota Mapala USM 1988 sebagai warga negara Republik Indonesia
yang berjiwa Pancasila, setia dan patuh pada Negara Kesatuan Republik Indonesia.
3.1.1.3 Struktur Organisasi
Struktur organisasi dari Mapala USM 1988 terdiri dari ketua, wakil ketua, sekretaris,
bendahara dan koordinator bidang. Koordinator bidang dibagi menjadi empat divisi yang terdiri
dari divisi Search and Rescue (SAR), divisi kesekretariatan, divisi pendidikan dan pelatihan,
serta divisi Litbang (penelitian dan pengembangan). Gambar struktur organisasi Mapala USM
1988 dapat dilihat pada Gambar 3.2 di bawah ini:
3-2
Gambar 3.2 Struktur Organisasi Mapala USM 1988
3.1.1.4 Kegiatan Organisasi

Berikut ini adalah kegiatan-kegiatan yang dilakukan Mapala USM 1988:
1. Konservasi alam.
2. Sosialisasi yang berhubungan dengan penjagaan alam atau kegiatan di alam bebas.
3. Memberikan bantuan kepada korban bencana alam yang terjadi di Indonesia.
4. Melakukan eksplorasi di alam bebas.
5. Mengadakan lomba-lomba yang berkaitan dengan menjaga alam.
6. Melakukan donasi sosial.
7. Mengadakan penyulaman.
3-3
3.1.2 Analisis Keadaan Saat Ini

3.1.2.1 Strength
Berikut ini adalah keunggulan yang dimiliki oleh Mapala USM 1988:
1. Anggota Mapala USM 1988 memiliki rasa solidaritas yang kuat serta tingginya rasa
saling mendukung antara satu sama lain.
2. Kebanyakan anggotanya bersemangat dalam melaksanakan kegiatan yang
dilaksanakan.
3. Kebanyakan anggotanya sudah berpengalaman dalam melaksanakan setiap kegiatan
yang diadakan.
3.1.2.2 Weakness
Berikut ini adalah kelemahan yang dimiliki oleh Mapala USM 1988:
1. Kesulitan untuk melakukan pendataan anggota barunya serta calon peserta acara pada
acara-acara yang akan diadakan.
2. Kesulitan dalam menyebarkan informasi baik di dalam maupun di luar universitas.
3. Kesulitan untuk mendokumentasikan kegiatan yang telah mereka lakukan.
3.1.2.3 Opportunity
Berikut ini adalah peluang yang dimiliki Mapala USM 1988 untuk mengembangkan
organisasinya:
1. Kebanyakan orang menyukai hal-hal yang berhubungan dengan petualangan di alam

bebas.
2. Kebanyakan orang menyukai hal-hal yang berhubungan dengan kegiatan olahraga
sambil menjaga lingkungan.
3. Saat ini banyak orang yang mulai peduli dengan lingkungan seiring menyebarnya isu
global warming di seluruh dunia.
3-4
3.1.2.4 Threat
Berikut ini adalah ancaman yang dimiliki Mapala USM 1988:

1. Seiring berkembangnya teknologi membuat kebanyakan mahasiswa dan masyarakat
lebih banyak menghabiskan waktu di dunia maya, sehingga waktu untuk menjaga
atau melestarikan alam berkurang atau bahkan tidak ada sama sekali.
2. Banyaknya komunitas pecinta alam lain yang lebih terkenal.
3. Banyaknya komunitas pecinta alam lain yang memiliki fasilitas yang lebih memadai.
3.1.3 Analisis Kebutuhan

Berdasarkan rumusan masalah yang dihadapi Mapala USM 1988, berikut ini
fitur-fitur yang akan dimiliki website untuk menjadi solusinya:
1. Menyediakan form pendaftaran yang memudahkan dalam pendataan anggota
baru dan peserta kegiatan.
2. Menyediakan halaman yang berisi informasi mengenai profil dan kegiatan
yang dilakukan Mapala USM 1988.
3. Menyediakan halaman yang berisi nomor kontak dan alamat lokasi Mapala
USM 1988.
4. Menyediakan halaman yang berisi form feedback.
3.2 Perancangan
3.2.1 Perancangan Website
Website yang dibuat bernama Mapala USM 1988 dan dapat diakses melalui link
yaitu “www.mapala1988.com” atau dapat ditemukan melalui mesin pencarian
dengan kata kunci “Mapala USM 1988”. Perancangan bagan user interface dapat
dilihat pada sub judul “3.2.2 Perancangan User Interface“.
Website tersebut berisi:
1. Header dan Footer
a. Header
Bagian header akan berisi logo Mapala USM 1988 dan menu navigasi
untuk berpindah ke halaman selanjutnya
3-5
b. Footer
Bagian footer akan berisi alamat, no telepon dan email Mapala USM
1988, social media Mapala USM 1988, dan copyright.
2. Halaman-halaman
a. Halaman home
Halaman home pada Gambar 3.3 akan berisi slide show berupa
beberapa kegiatan yang dilakukan USM 1988, visi dan misi Mapala
USM 1988, sekilas berita terkini dan acara selanjutnya yang waktu
penyelenggaraannya paling dekat.
b. Halaman tentang kami
Halaman tentang kami pada Gambar 3.4 akan berisi profil, sejarah
singkat, dan struktur organisasi dari Mapala USM 1988.
c. Halaman kegiatan
Halaman kegiatan pada Gambar 3.5 akan berisi kegiatan yang dilakukan
Mapala USM 1988 dan terdapat tombol di akhir halaman untuk
mendaftar anggota baru yang akan diarahkan ke halaman pendaftaran
anggota baru.
d. Halaman tanggap bencana
Halaman tanggap bencana pada Gambar 3.6 ini akan berisi bagaimana
Mapala USM 1988 dalam membantu sesama yang mengalami bencana
alam.
e. Halaman pendaftaran anggota baru
Halaman pendaftaran anggota baru pada Gambar 3.7 ini akan berisi
form untuk melakukan pendaftaran anggota baru
f. Halaman pendaftaran acara
Halaman pendaftaran acara pada Gambar 3.7 (Desain halaman sama
seperti halaman pendaftaran anggota baru) ini akan berisi form untuk
melakukan pendaftaran acara.
g. Halaman kontak
Halaman kontak pada Gambar 3.8 akan berisi nomor kontak ,dan alamat
lokasi Mapala USM 1988 yang diambil dari Google Maps.
3-6
3.2.2 Perancangan User Interface

Gambar 3.3 menampilkan struktur halaman home pada website.
Gambar 3.3 Halaman Home
3-7
Gambar 3.4 menampilkan halaman tentang kami pada website.
Gambar 3.4 Halaman Tentang kami
3-8
Gambar 3.5 menampilkan halaman kegiatan pada website.
Gambar 3.5 Halaman Kegiatan
3-9
Gambar 3.6 menampilkan halaman tanggap bencana pada website.
Gambar 3.6 Halaman Tanggap Bencana
3 - 10
Gambar 3.7 menampilkan halaman form pendaftaran anggota baru dan acara pada website.
Gambar 3.7 Halaman Form Pendaftaran Anggota Baru dan Acara
3 - 11
Gambar 3.8 menampilkan halaman kontak pada website
Gambar 3.8 Halaman Kontak
3 - 12
BAB 4 PENGEMBANGAN DAN PENGUJIAN
4.1 Pengembangan
4.1.1 Hardware
Berikut ini adalah spesifikasi hardware yang digunakan dalam pembuatan website:
a. System Manufacturer : Acer
b. System Model : Nitro AN515-56
c. Processor : 11th Gen Intel® Core™ i5-11300H @3.10 GHz
d. Memory : 24 GB RAM
e. Storage : 512 GB SSD
f. DirectX Version : Directx 12
4.1.2 Software
Berikut ini adalah software yang digunakan dalam pembuatan website:
a. Operating System : Window 11 Pro 64-bit
b. Editor : Adobe Dreamweaver 2021
c. Browser : Mozilla Firefox
d. Photo Editor : Adobe Photoshop 2021
4.1.3 Penggunaan CSS

Penggunaan CSS dalam pembuatan website ini terletak pada bagian tombol daftar, box
dalam berita, kotak nomor pada bagian visi dan misi, dan tombol read more:
Source code dibawah ini digunakan untuk mendekorasi tombol daftar:

a.tbl-kuning {
background: #FDFD96;
border-radius: 20px;
padding: 15px 20px 15px 20px;
color: black;
text-decoration: none;
cursor: pointer;
font-weight: bold;
box-shadow: 4px 4px 4px 4px gray; }
4-1
Source code dibawah ini digunakan untuk membuat tampilan card pada bagian berita terkini:
.berita1 {
width: 400px;
height: 550px;
margin-left: 80px;
margin-top: 70px;
margin-bottom: -548px;
background: white;
font-weight: 700;
}
Source code dibawah ini digunakan untuk membuat tombol read more pada bagian berita:
.button1 {
background: #FDFD96;
width: 200px;
color: black;
font-size: 20px;
text-align: center;
text-decoration: none;
border-style: solid 2px;
margin-top: 50px;
margin-bottom: -50px;
margin-left: 100px;
}
Source code dibawah ini digunakan untuk membuat nomor pada bagian visi dan misi:
.nomora {
width: 50px;
height: 50px;
4-2
text-align: center;
background-color: lightgreen;
margin-left: 600px;x;
margin-top: -50px;
margin-bottom: 40px;
}
4.1.4 Penggunaan JavaScript

Penggunaan JavaScript dalam pembuatan website ini terletak pada pembuatan slideshow
(Otomatis maupun manual), memunculkan tombol submit pada form pendaftaran, reset data pada
form pendaftaran, menyimpan data form ke local storage dan tahun copyright.
Source code dibawah ini digunakan dalam pembuatan slideshow yang dapat bergerak
secara otomatis pada bagian home:
const slideshowImages = document.querySelectorAll(".intro-slideshow

img");
const nextImageDelay = 5000;

let currentImageCounter = 0;
slideshowImages[currentImageCounter].style.opacity = 1;
setInterval(nextImage, nextImageDelay);
function nextImage() {
currentImageCounter = (currentImageCounter+1) %
slideshowImages.length;
}
4-3
Source code dibawah ini digunakan dalam pembuatan slideshow yang dapat bergerak
secara manual pada halaman tanggap bencana:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
Source Code dibawah ini digunakan untuk membuat Copyright. Copyright (hak cipta)
digunakan untuk melindungi dan mematenkan karya pemiliknya. Source code Copyright
diletakkan pada footer dalam halaman web sehingga user dapat mengetahui tahun buat halaman
web. Penggunaan tahun menggunakan bahasa JavaScript yang dapat secara otomatis tergantikan
sesuai dengan kalender:
4-4
<script>
document.write(new Date().getFullYear())
</script>
Source code dibawah ini digunakan dalam memunculkan tombol submit pada form
pendaftaran anggota. User harus klik checkbox di akhir form agar tombol submit dapat terlihat:
window.addEventListener("load",function(){
agreetoTerm.addEventListener("click",function() {
if (agreetoTerm.checked) {
button.style.visibility = "visible";
}
else {
button.style.visibility = "hidden";
}
}, false)
});
Source code dibawah ini digunakan untuk menyimpan data form pada local storage:
function myfunc(event) {
alert("Data berhasil di input");
var full_name = document.getElementById("nama").value;
var no_nim = document.getElementById("nim").value;
var acara = document.getElementById("acara").value;
var jenis = document.getElementById("jenis_kelamin").value;
var notel = document.getElementById("notelepon").value;
var alamat = document.getElementById("alamata").value;
var vaksin = document.getElementById("vaksinasi").value;
var sertifikat = document.getElementById("sertivaksin").value;
var bukti = document.getElementById("pasfoto").value;
localStorage.setItem("Acara", acara);
4-5
localStorage.setItem("Nama", full_name);
localStorage.setItem("NIM", no_nim);
localStorage.setItem("Jenis kelamin", jenis);
localStorage.setItem("No telepon", notel);
localStorage.setItem("Alamat", alamat);
localStorage.setItem("Vaksinasi", vaksin);
localStorage.setItem("Bukti Sertifikat", sertifikat);
localStorage.setItem("Bukti Pembayaran", bukti);
}
Gambar 4.1 menampilkan hasil data yang berhasil dimasukan pada local storage
Gambar 4.1 Data pada Local Storage
4-6
4.1.5 Screenshot
4.1.5.1 Halaman Awal
Hasil pengembangan halaman awal pada Gambar 4.2 menampilkan tampilan website
saat pertama kali dibuka, pada gambar 4.3 terdapat bagian visi dan misi Mapala USM 1988, pada
gambar 4.4 terdapat card yang berisi highlight berita terkini, pada gambar 4.5 terdapat halaman
berita terkini jika di klik “Read More”, serta pada gambar 4.6 terdapat bagian acara terbaru.
Gambar 4.2 Tampilan Awal Website
4-7
Gambar 4.3 Bagian Visi dan Misi Mapala USM 1988
Gambar 4.4 Bagian Berita Terkini
Gambar 4.5 Halaman Berita
4-8
Gambar 4.6 Bagian Acara Terbaru
4.1.5.2 Footer
Hasil Pengembangan Footer di setiap form pada halaman website Mapala USM 1988
dapat dilihat pada gambar 4.7.
Gambar 4.7 Bagian Footer
4.1.5.3 Form Pendaftaran

Hasil Pengembangan Form Pendaftaran terdapat 2 jenis yaitu form pendaftaran untuk
kegiatan acara yang ada pada “Halaman Awal” pada gambar 4.8 serta form pendaftaran untuk
anggota Mapala USM 1988 pada gambar 4.9.
4-9
Gambar 4.8 Pendaftaran Acara
Gambar 4.9 Pendaftaran Anggota Baru
4 - 10
4.1.5.4 Kontak
Hasil Pengembangan pada Kontak menampilkan alamat email, youtube, instagram,
whatsapp pada gambar 4.10 dan google maps pada gambar 4.11 serta bagian feedback pada
gambar 4.12.
Gambar 4.10 Bagian Kontak
Gambar 4.11 Bagian Peta
4 - 11
Gambar 4.12 Bagian Feedback
4.1.5.5 Tanggap Bencana
Hasil Pengembangan pada tanggap bencana dapat dilihat pada gambar 4.13.
Gambar 4.13 Halaman Tanggap Bencana
4 - 12
4.1.5.6 Halaman About Us
Hasil Pengembangan dari halaman About Us pada gambar 4.14 menampilkan pengenalan dari
Mapala USM 198, pada gambar 4.15 menampilkan sejarah, dan pada gambar 4.16 menampilkan
struktur organisasi dari Mapala USM 1988.
Gambar 4.14 Bagian Perkenalan dalam Form About Us
Gambar 4.15 Bagian Sejarah dalam Form About Us
4 - 13
Gambar 4.16 Bagian Struktur Organisasi
4.1.5.7 Form Kegiatan
Hasil Pengembangan dari Form Kegiatan bisa dilihat pada gambar 4.17.
Gambar 4.17 Bagian Kegiatan Mapala USM 1988
4 - 14
4.2 Pengujian
4.2.1 Pengujian Links
Pengujian Links pada website dapat dilihat pada tabel berikut ini:
Pengujian Hasil yang Hasil Pengujian Keterangan

diharapkan
Link halaman home Apabila gambar logo Link dapat berpindah Berhasil
Mapala USM 1988 di ke halaman home
klik , maka akan
berpindah ke halaman
home
Link halaman tentang Apabila navigasi Link dapat berpindah Berhasil

kami tentang kami di klik , ke halaman tentang
maka akan berpindah kami
ke halaman tentang
kami.
Link halaman Apabila navigasi Link dapat berpindah Berhasil

Kegiatan Kegiatan di klik, ke halaman kegiatan
maka akan berpindah
ke halaman Kegiatan.
Link halaman Apabila navigasi Link dapat berpindah Berhasil

Tanggap Bencana Tanggap Bencana di ke halaman Tanggap
klik , maka akan Bencana
Tanggap Bencana.
Link halaman Daftar Apabila navigasi Link dapat berpindah Berhasil

anggota baru Daftar pada bagian ke halaman daftar
navigasi di klik dan anggota baru
tombol pada halaman
4 - 15
kegiatan, maka akan

daftar anggota baru.
Link halaman Daftar Apabila navigasi Link dapat berpindah Berhasil

acara Daftar pada bagian ke halaman daftar
acara terbaru terbaru
(Halaman home) di
klik , maka akan
daftar acara.
Link halaman Kontak Apabila navigasi Link dapat berpindah Berhasil

Kontak di klik, maka ke halaman kontak
akan berpindah ke
halaman kontak.
Link halaman Berita Apabila tombol Read Link dapat berpindah Berhasil
More pada bagian ke halaman berita
berita (Halaman
home) di klik, maka
akan menuju ke
halaman berita
Link social media Apabila di klik salah Link dapat berpindah Berhasil
(Instagram, Youtube, satu social media ke salah satu social
WhatsApp atau pada bagian footer media yang dipilih
Twitter) maka akan menuju
social media sesuai
yang dipilih
Link email Apabila di klik, maka Link dapat mengarah Berhasil

akan mengarahkan ke ke Gmail
4 - 16
Gmail
Link dokumen atau Apabila tombol Link dapat mengarah Berhasil

file browse pada bagian ke file explorer pada
form di klik, maka komputer pengguna
akan diarahkan ke file
explorer pada
komputer pengguna
4.2.2 Pengujian CSS
Pengujian CSS pada website dapat dilihat pada tabel berikut ini:

diharapkan
.tbl-kuning Memberikan latar Navigasi daftar Berhasil

warna kuning, teks memiliki latar
berwarna hitam dan belakang kuning
shadow pada navigasi dengan teks berwarna
daftar. hitam dan shadow.
.tbl-kuning:hover Saat navigasi daftar Navigasi daftar Berhasil

tersebut di hover, berganti warna
akan berganti latar menjadi hijau dengan
warna menjadi hijau teks berwarna putih
dan teks menjadi dan tulisan tebal
warna putih dan
diberi tulisan tebal
.berita1 Memberikan box Box memiliki latar Berhasil

.berita2 dengan latar warna warna putih, gambar
4 - 17
.berita3 putih, gambar dan button read more

mengenai berita yang berwarna kuning
ditampilkan dan
button read more
berwarna kuning
.button1 Memberikan button Button memiliki latar Berhasil

.button2 read more latar warna warna kuning dan
.button3 kuning dan jika diklik dapat pindah ke
akan muncul berita halaman lain
lengkapnya
.nomora Memberi box latar Box memiliki latar Berhasil

.nomor warna hijau muda warna hijau muda dan
dengan nomor memiliki nomor
didalamnya didalamnya
4.2.3 Pengujian JavaScript

Pengujian JavaScript pada website dapat dilihat pada tabel berikut ini:

diharapkan
Pembuatan slideshow Gambar akan Gambar dapat Berhasil

berganti dari satu berganti dari satu
gambar ke gambar gambar ke gambar
lain secara otomatis lain secara otomatis
Gambar akan Gambar dapat Berhasil

berganti dari satu berganti dari satu
gambar ke gambar gambar ke gambar
lain secara manual lain secara manual
4 - 18
Membuat Copyright Akan secara otomatis Secara otomatis Berhasil

pada footer sesuai berganti ke tahun berganti ke tahun
dengan tahun selanjutnya sesuai selanjutnya sesuai
dengan tahun pada dengan tahun pada
kalender kalender
Menampilkan tombol Tombol submit akan Tombol submit dapat Berhasil

submit muncul jika user muncul jika user
mengklik checkbox mengklik checkbox
Menyimpan data Data yang telah Data dapat disimpan Berhasil

pada local storage diinput pada form pada local storage
akan disimpan pada
local storage
Menghapuskan data Jika menekan tombol Data terhapus semua Berhasil

pada form reset, data akan
terhapus semua
4 - 19
BAB 5 KESIMPULAN DAN SARAN
5.1 Kesimpulan
Website ini berhasil dibuat dengan menggunakan komponen-komponen HTML, CSS, dan
JavaScript yang sudah rencanakan rancangannya sebelumnya.
Website ini juga sudah dibuat sesuai dengan perencanaan tujuan proyek ini, yaitu untuk
membuat website yang dapat membantu Mapala USM 1988 dalam mendokumentasikan kegiatan
yang telah dilakukan, mempermudah mahasiswa baru dalam melakukan pendaftaran anggota,
mempermudah pendaftaran calon peserta acara yang akan diadakan, dan mempromosikan
dirinya kepada masyarakat di luar kampus.
5.2 Saran
Demikianlah laporan dari proyek ini. Penulis menyadari bahwa laporan dan website yang
telah dibuat masih banyak memiliki kekurangan karena terbatasnya pengetahuan dan waktu
pengerjaan , oleh karena itu, saran dan kritik yang membangun dari pembaca sangat diharapkan.
Adapun beberapa saran untuk pembuatan website ini kedepannya adalah untuk
memperbanyak fitur dan memperbaharui tampilannya agar menjadi lebih user friendly.
5-1
DAFTAR REFERENSI
[1] Paulupi. Alam Adalah: Pengertian, Bagian dan Keterkaitan Dengan Manusia.
[Daring]. Tersedia : https://paulipu.com/alam-adalah/ [15 Maret 2022]
[2] J.Nugraha. (23 Juni 2021). Pengertian Lingkungan Alam dan Contohnya, Berikut
Penjelasannya.[Daring].Tersedia:https://www.merdeka.com/jateng/pengertian-lingkun
gan-alam-dan-contohnya-berikut-penjelasannya-kln.html [15 Maret 2022]
[3] SMK Global Indonesia. (11 Desember 2020). Pecinta Alam. [Daring]. Tersedia :
https://smkglobalindonesia.sch.id/post/pecinta-alam [15 Maret 2022]
[4] M. R. Adani. (16 Desember 2020). Pengenalan Apa Itu Website Beserta Fungsi,
Manfaat dan Cara Membuatnya. [Daring].Tersedia: https://www.sekawanm
edia.co.id/blog/pengertian-website/ [12 Maret 2022]
[5] Dimble Web. (14 Juli 2019). Sejarah Dan Perkembangan Website. [Daring].
Tersedia:https://dimbleweb.com/blog/read/sejarah-dan-perkembangan-website/124 [12
Maret 2022]
[6] F.S.Esaputra. (11 Desember 2019). Berkenalan Dengan Pemrograman Web. [Daring].
Tersedia: https://www.dicoding.com/blog/kenal-pemrograman-web/ [12 Maret 2022]
[7] A. Muhardian. (17 Juni 2020). Sejarah dan Asal Usul HTML, XHTML, dan HTML
5.[Daring]. Tersedia: https://www.petanikode.com/sejarah-html/ [12 Maret 2022]
[8] P. Aprilia. (18 Mei 2021). Pengertian HTML, Fungsi dan Cara Kerjanya. [Daring].
Tersedia: https://www.niagahoster.co.id/blog/html-adalah/ [12 Maret 2022
6-1
[9] S. Ramadhan. (10 November 2020). Sejarah dan Perkembangan CSS. [Daring].
Tersedia: https://www.matawebsite.com/blog/sejarah-dan-perkembangan-css/ [12
Maret 2022]
[10] R. Juliarto. (2 Desember 2020). Apa Itu JavaScript? Fungsi dan Contohnya. [Daring].
Tersedia: https://www.dicoding.com/blog/apa-itu-javascript-fungsi-dan- contohnya/
[12 Maret 2022]
[11] M. Madasamy. (10 Maret 2018). JavaScript brief history and ECMAScript (ES6, ES7,
ES8,ES9) features. [Daring]. Tersedia: https://madasamymedium.com/ja
vascript-brief-history-and-ecmascript-es6-es7-es8-features-673973394df4 [12 Maret
2022]
6-2

Tugas Besar Proyek Teknologi Web - Laporan Proyek

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Besar Proyek Teknologi Web - Laporan Proyek

Diunggah oleh

Hak Cipta:

Format Tersedia

PERENCANAAN PEMBUATAN WEB UNTUK MAHASISWA PECINTA ALAM

UNIVERSITAS SEMARANG 1988

(Yosi Yonata S.T., M.T.)

1221007 SAMUEL OLIVER LIMANJAYA

1221021 AGUNG WILLIAM PRATAMA

1221024 RAON SPIELBERG BEREK

1221026 FERNANDO GILBERTO THENU

DEPARTEMEN SISTEM INFORMASI

INSTITUT TEKNOLOGI HARAPAN BANGSA

1.1 Latar Belakang

1.2 Rumusan Masalah

1.3 Batasan Masalah

1.4 Tujuan Proyek

1.5 Manfaat Proyek

1.5.2 Manfaat untuk Masyarakat

1.5.3 Manfaat untuk Pembuat Website

2.1 Pengertian Alam

2.2 Pengertian Pecinta Alam

2.3 Pengertian Website

2.4 Pengertian HTML

2.5 Pengertian CSS

2.6 Pengertian JavaScript

Gambar 3.1 Logo Mapala USM 1988

3.1.1.1 Visi dan Misi Organisasi

Gambar 3.2 Struktur Organisasi Mapala USM 1988

3.1.1.4 Kegiatan Organisasi

3.1.2 Analisis Keadaan Saat Ini

1. Kebanyakan orang menyukai hal-hal yang berhubungan dengan petualangan di alam

Berikut ini adalah ancaman yang dimiliki Mapala USM 1988:

3.1.3 Analisis Kebutuhan

3.2.2 Perancangan User Interface

Gambar 3.3 Halaman Home

Gambar 3.4 menampilkan halaman tentang kami pada website.

Gambar 3.4 Halaman Tentang kami

Gambar 3.5 menampilkan halaman kegiatan pada website.

Gambar 3.5 Halaman Kegiatan

Gambar 3.6 menampilkan halaman tanggap bencana pada website.

Gambar 3.6 Halaman Tanggap Bencana

Gambar 3.7 Halaman Form Pendaftaran Anggota Baru dan Acara

Gambar 3.8 menampilkan halaman kontak pada website

Gambar 3.8 Halaman Kontak

4.1.3 Penggunaan CSS

Source code dibawah ini digunakan untuk mendekorasi tombol daftar:

4.1.4 Penggunaan JavaScript

const slideshowImages = document.querySelectorAll(".intro-slideshow

const nextImageDelay = 5000;

Gambar 4.1 Data pada Local Storage

Gambar 4.2 Tampilan Awal Website

Gambar 4.3 Bagian Visi dan Misi Mapala USM 1988

Gambar 4.4 Bagian Berita Terkini

Gambar 4.5 Halaman Berita

Gambar 4.6 Bagian Acara Terbaru

Gambar 4.7 Bagian Footer

4.1.5.3 Form Pendaftaran

Gambar 4.8 Pendaftaran Acara

Gambar 4.9 Pendaftaran Anggota Baru

Gambar 4.10 Bagian Kontak

Gambar 4.11 Bagian Peta

Gambar 4.12 Bagian Feedback

4.1.5.5 Tanggap Bencana

Gambar 4.13 Halaman Tanggap Bencana

4.1.5.6 Halaman About Us

Gambar 4.14 Bagian Perkenalan dalam Form About Us

Gambar 4.15 Bagian Sejarah dalam Form About Us