Disusun Oleh :
Dosen Pengampu:
Puji syukur kehadirat Allah Swt yang senantiasa kita ucapkan. Tidak lupa
sholawat beserta salam tercurahkan kepada baginda kita Rasulullah Saw yang
telah membimbing kita menuju jalan yang benar.
Penyusunan tugas laporan praktikum project mandiri yang berjudul
“Organisasi Himpunan Mahasiswa Ogan Ilir”. Adapun tujuan penulisan laporan
ini adalah untuk memenuhi tugas mata kuliah Praktek Pemrograman Berbasis
web2.
Penulis mengucapkan terima kasih kepada Dosen Pengampuh, Ibu Ica
Admirany,S.Kom.,M.Kom. yang telah membimbing untuk pengerjaan tugas
project mandiri ini. Saya juga berterima kasih kepada para pihak yang terlibat dan
mendukung penulisan laporan. Penulis berharap agar laporan ini mampu
memberikan manfaat baru bagi pembaca.
Dengan kerendahan hati, penulis memohon maaf apabila ada kesalahan
dalam proses pembuatan laporan ini, baik dalam penulisan maupun kesalahan
yang tak terdua. Penulis berharap terbuka pada kritik dan saran sebagai bagian
dari revisi laporan ini.
Penulis
i
DAFTAR ISI
KATA PENGANTAR.................................................................................................i
DAFTAR ISI...............................................................................................................ii
BAB I PENDAHULUAN...........................................................................................1
1.1 Latar Belakang..........................................................................................1
1.2 Rumusan Masalah.....................................................................................2
1.3 Batasan Masalah........................................................................................2
1.4 Tujuan.......................................................................................................2
1.5 Manfaat.....................................................................................................2
BAB II TINJAUAN PUSTAKA..................................................................................3
2.1 Aplikasi.....................................................................................................3
2.2 Website......................................................................................................3
2.3 HyperText Markup Language (HTML)......................................................3
....................................................................................................................................
2.4 Cascading Style Sheet (CSS)......................................................................4
2.5 Database....................................................................................................5
....................................................................................................................................
2.6 MySQL (Structured Query Language)........................................................5
2.7 PHPMyAdmin...........................................................................................6
2.8 XAMPP.....................................................................................................7
2.9 Visual Studio Code....................................................................................8
2.10 Boostrap..................................................................................................8
2.11 Canva......................................................................................................9
BAB III PERANCANGAN........................................................................................10
3.1 Database...................................................................................................10
3.2 Perancangan Tampilan Desain.................................................................14
3.2.1 Perancangan Halaman Login.................................................14
3.2.2 Perancangan Halaman Dashboard..........................................14
3.2.3 Perancangan Halaman Data Anggota.....................................15
3.2.4 Perancangan Halaman Input Data Anggota...........................15
3.2.5 Perancangan Halaman Data Proker........................................16
3.2.6 Perancangan Halaman Input Data Proker..............................16
3.2.7 Perancangan Halaman Data Anggota HMOI.........................17
3.2.8 Perancangan Halaman Input Data Anggota HMOI................17
ii
3.2.9 Perancangan Halaman Data Bidang.......................................18
3.2.10 Perancangan Halaman Input Data Bidang.............................18
3.2.11 Perancangan Halaman Data Jabatan......................................19
3.2.12 Perancangan Halaman Input Data Jabatan.............................19
BAB IV PEMBAHASAN...........................................................................................20
4.1 Tampil Halaman Login............................................................................20
4.2 Tampil Halaman Dashboard.....................................................................20
4.3 Tampilan Halaman Input Data Anggota..................................................21
4.4 Tampilan Halaman Proker........................................................................21
4.5 Tampilan Halaman Input Proker...............................................................22
4.6 Tampilan Halaman Data Anggota HMOI..................................................22
4.7 Tampilan Halaman Input Data Anggota HMOI.........................................23
4.8 Tampilan Halaman Data Bidang...............................................................23
4.9 Tampilan Halaman Input Data Bidang......................................................24
4.10 Tampilan Halaman Data Jabatan............................................................24
4.11 Tampilan Halaman Input Data Jabatan....................................................25
BAB V PENUTUP.....................................................................................................26
5.1 Kesimpulan...............................................................................................26
5.2 Saran .....................................................................................................26
DAFTAR PUSTAKA.................................................................................................27
iii
BAB I
PENDAHULUAN
1
1.1 Rumusan Masalah
Adapun rumusan masalah yang dapat saya ambil dalam latar belakang
tersebut, yaitu “Bagaimana membangun sistem yang dapat digunakan
sebagai media informasi Himpunan Mahasiswa HMOI sehingga informasi
yang diharapkan tersampaikan lebih efektif dan efisien ? ”
1.3 Tujuan
Tujuan dari pembuatan website HMOI ini adalah agar lebih mudah dan
efisien dalam pengelolaan dataAnggota dan kegiatan HMOI.
1.4 Manfaat
Adapun manfaat dari aplikasi ini adalah agar lebih mudah dan efisien dalam
pengelolaan data Anggota dan kegiatan HMOI.
2
BAB II
TINJAUAN PUSTAKA
2.1 Aplikasi
Aplikasi adalah penerapan dari rancang sistem untuk mengolah data yang
menggunakan aturan atau ketentuan bahasa pemrograman tertentu. Aplikasi
adalah suatu program komputer yang dibuat untuk mengerjakan dan
melaksanakan tugas khusus dari pengguna (Baso dkk 2020).
Aplikasi adalah perangkat lunak yang digunakan untuk tujuan tertentu,
seperti mengolah dokumen, mengatur Windows &, permainan (game), dan
sebagainya (Tri 2020).
2.2 Website
Website adalah kumpulan halaman yang dibuat sebagai tujuan tertentu
pada domain tertentu di Internet. Halaman-halaman tersebut saling
berhubungan dan dapat diakses secara luas melalui halaman depan
menggunakan browser dengan URL website (Ningsih and Abidin 2021).
Menurut Zufria dan Azhari dalam jurnal yang ditulis oleh Zahir Website
adalah sebuah komponen yang terdiri dari teks, gambar, suara, animasi
sehingga menjadi media informasi yang menarik dikunjungi oleh orang
lain(Zahir 2020).
3
ASCII agar bisa menghasilkan tampilan yang terintegrasi. Berkas yang
dimuat dalam piranti lunak pengolahan data dan disimpan kedalam sebuah
format ASCII agar bisa dapat menjadi halaman sebuah web dengan perintah
HTML. Berawal dari bahasa yang banyak dipakai sebelumnya didalam dunia
percetakan dan juga dunia penerbitan yang biasa disebut dengan Standard
Generalized Markup Language atau SGML, HTML menjadi sebuah standar
yang dipakai secara luas dalam menampilkan halaman web (I. S. Putra dkk
2019).
HTML adalah singkatan dari Hypertext Markup Language. HTML
memungkinkan user untuk membuat dan menyusun bagian paragraf, heading,
link atau tautan, dan block quote untuk halaman web dan aplikasi. HTML
bukan bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan
untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML
memungkinkan user untuk mengorganisir dan memformat dokumen, sama
seperti Microsoft Word (A. Kurniawan and Rosa 2020).
5
2.5 Database
Siregar, dkk. menjelaskan database atau basis data adalah sekumpulan
informasi yang disimpan dalam komputer secara sistematik dan merupakan
sumber informasi yang dapat diperiksa menggunakan suatu program komputer
dan berfungsi untuk menyimpan informasi atau data (Siregar, dkk 2018).
Basis data yang terdiri dari basis dan data yang dalam terjemahan yang
berarti markas atau gudang. Sedangkan data merupakan kumpulan dari suatu
objek yang berupa huruf, angka, gambar, teks, simbol, dan suara. Basis data
dapat diartikan sebagai kumpulan kelompok data yang saling terhubung dan
terorganisasi yang dapat dimanfaatkan secara cepat dan mudah. Adapun artian
lain dari basis data yaitu kumpulan data dalam bentuk berkas, tabel, ataupun
arsip yang saling berhubungan satu sama lain dalam penyimpanan online,
untuk kemudahan dalam pengaturan, pengelompokan, dan struktur data
(Prasetyo dkk 2022).
5
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL
(bahasa inggris: database management system) atau DBMS yang multithread,
multiuser, dengan sekitar 6 juta instalasi di seluruh dunia (Zahir 2020).
2.7 PHPMyAdmin
PHPMyAdmin merupakan suatu perangkat lunak yang ditulis dalam
bahasa pemrograman PHP yang digunakan untuk menangani administrasi
MySQL (keperluan manajemen basis data) melalui jejaring internet.
PHPMyAdmin mendukung berbagai operasi MySQL, diantaranya untuk
pengelolaan basis data, tabel-tabel, bidang (fields), relasi (relations), indeks,
pengguna (users), perizinan (permissions), dan lain-lain (Suryadi dkk2020).
PHPMyAdmin merupakan bagian untuk mengelola basis data MySQL
yang ada di computer. Untuk membuka localhost, buka browser lalu ketikkan
alamat http://localhost/phpmyadmin, maka akan muncul halaman
PHPMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis
data baru, dan mengelolanya (Suryadi dkk 2020).
6
2.8 XAMPP
Menurut Iqbal dalam jurnal yang ditulis oleh Putra menyatakan XAMPP
merupakan software server apache dimana dalam XAMPP yang telah tersedia
database server seperti MySQL dan PHP programming. XAMMP memiliki
keunggulan yaitu cukup mudah dioperasikan, tidak memerlukan biaya serta
mendukung instalasi pada Windows dan Linux. Keuntungan lain yang
didapatkan adalah hanya dengan melakukan instalsi cukup satu kali kemudian
didalamnya tersedia MySQL, apache web server, database server PHP
support (PHP 4 dan PHP 5) dan beberapa modul lainnya (A. B. Putra and Nita
2019).
Sedangkan menurut Mawaddah dan Fauzi dalam jurnal yang ditulis oleh
Putra menyatakan bahwa XAMPP ialah software yang di dalamnya terdapat
server MySQL dan didukung oleh PHP sebagai bahasa pemrograman untuk
membuat website dinamis serta terdapat web server apache yang dapat
dijalankan di beberapa platform seperti OS X, Windows, Linux, Mac, dan
Solaris (A. B. Putra and Nita 2019).
Dari pengertian diatas disimpulkan bahwa XAMPP merupakan software
server apache di mana memiliki banyak keuntungan seperti mudah untuk
digunakan, tidak memerlukan biaya serta mendukung pada instalasi Windows
dan Linux. Hal ini juga didukung karena dengan instalasi yang di lakukan satu
kali tersedia MySQL, apache web server, Database server PHP support.
7
2.9 Visual Studio Code
Visual Studio Code adalah editor perangkat lunak yang sangat ringan
namun kuat. Kode sumbernya berjalan dari desktop. Dukungan bawaan Untuk
JavaScript, Scripts, Node.js, ada berbagai ekstensi. Tersedia dalam bahasa lain
seperti C++, C#, Python dan PHP. Hal ini Berdasarkan versi lintas platform
dari Githubs Electron Pengeditan kode untuk komponen Atom berdasarkan
JavaScript dan HTML5. editor ini Adalah lingkungan pengembangan
terintegrasi (IDE) berfitur lengkap. Pengembang menggunakan teknologi
cloud terbuka Microsoft. secara Visual Kode Studio dibuat menggunakan alat
.NET sumber terbuka Dukungan kode ASP.NET C#, membangun pengembang
alat Omnisarp .NET dan kompiler Roslyn. Karena antarmuka pengguna mudah
digunakan Berdasarkan gaya penjelajah umum, di panel kiri Menampilkan
semua file dan folder yang dapat mengakses panel editor Di sisi kanan. Pada
kasus ini, Editornya berkembang dengan baik dan enak dipandang. Memiliki
fitur hebat dan berfungsi dengan intellisense dan pelengkapan otomatis Cocok
untuk JSON, CSS, HTML, Node.js (Noviantoro dkk. 2022).
2.10 Bootstrap
Bootstrap adalah paket aplikasi siap pakai untuk membuat halaman
front- end maupun back-end dari sebuah website, dan bootstrap merupakan
template desain web dengan fitur plus (Setiady and Syah 2018).
Bootstrap adalah salah satu framework HTML, CSS dan JavaScript
yang paling populer dikalangan para pengembang web. Bootstrap memiliki
fungsi yang tidak jauh berbeda dengan framework HTML, CSS dan
JavaSript lainnya (Nurmiati and dkk 2021).
8
2.11 Pengertian Canva
Membuat konten Instagram untuk feed, Story, dan Ads dengan pilihan
animasi atau static
9
BAB III
PERANCANGAN
3.1 Database
10
Gambar 3.2 Database DB anggota
11
Database Detaiorder memuat data-data / informasi tentang id bidang
dan nama bidang.
12
Database konfirmasi berisikan tentang nama bidang, nama proker
dan tanggal.
13
3.2 Perancangan Tampilan Desain
3.2.1 Perancangan Halaman Login
14
3.2.3 Perancangan Halaman Data Anggota
15
3.2.5 Perancangan Halaman Data Proker
16
3.2.7 Perancangan Halaman Data Anggota HMOI
17
3.2.9 Perancangan Halaman Data Bidang
18
3.2.11 Perancangan Halaman Data Jabatan
19
BAB IV
PEMBAHASAN
20
4.3 Tampilan halaman Data Anggota
Pada halaman ini berisikan informasi mengenai data anggota yaitu nama ,angkatan ,
jabatan , no hp, jenis kelamin.
21
4.5 Tampilan Halaman Proker
Pada halaman ini berisikan informasi proker yang berisikan nama bidang , nama
proker, dan tanggal.
22
4.7 Tampilan Halaman Data Anggota HMOI
Pada halaman ini berisikan Data anggota HMOI yaitu nama anggota, NPM, no hp,
dan jenis kelamin.
23
4.9 Tampilan Halaman Data Bidang
Pada halaman ini berisikan informasi mengenai bidang yang ada di HMOI
24
4.11 Tampilan Halaman Data Jabatan
Pada halaman ini berisikan informasi tentang jabatan yang ada.
25
BAB V
PENUTUP
5.1 Kesimpulan
Website adalah kumpulan halaman dalam suatu domain yang memuat tentang
berbagai informasi agar dapat dibaca dan dilihat oleh pengguna internet melalui sebuah
mesin pencari. Informasi yang dapat dimuat dalam sebuah website umumnya berisi
mengenai konten gambar, ilustrasi, video, dan teks untuk berbagai macam kepentingan.
Tampilan website juga harus diperhatikan agar suatu website dapat terlihat menarik
sehingga para pengunjung web tidak bosan melihat halaman websitenya. Jika tampilan
website rapi maka akan mempengaruhi minat pengunjung websitenya. Agar halaman suatu
website menjadi lebih menarik maka
26
dapat memasukkan CSS sebagai komponen untuk mengatur tampilan yang ada.
Penelitian ini menghasilkan sebuah aplikasi Sistem Informasi Penjualan berbasis
web yang dapat digunakan oleh HMOI untuk mengelolah data Anggota dan kegiatan di
HMOI.
5.2 Saran
Saran yang dapat diberikan adalah untuk mahasiswa yang tertarik
mengembangkan aplikasi berbasis web, diharapkan hasil laporan ini dapat digunakan
sebagai bahan rujukan dalam pengembangan aplikasi berbasis web tentunya dengan
memperhatikan kekurangan dan keterbatasan laporan ini, karena
dalam laporan ini penulis masih merasa banyak kekurangan yang harus diperbaiki. Selain
itu diharapkan pengembangan aplikasi selanjutnya dapat dibuatkan fiturfitur baru agar
aplikasi tersebut jauh lebih baik.
DAFTAR PUSTAKA
27
Ilmiah Information Technology 9 (2) : 1-7.
http://www.journal.uncp.ac.id/index.php/computare/article/view/1467/
1280%0Ahttp://www.journal.uncp.ac.id/index.php/computare/article/view/
1467.
Nofyat, Adelina Ibrahim, and Arisandy Ambarita. 2018. “Sistem Informasi
Pengaduan Pelanggan Air Berbasis Website Pada PDAM Kota Ternate.
IJIS- Indonesian Journal On Information System, 3(1).” Ijis Indonesian
Journal 3 (April): 10–19.
Putra, Irvan Sulistiya, FX Ferdinandus, and Muhaji Bayu. 2019. “Sistem
Pendukung Keputusan Pemilihan Paket Pernikahan Dengan Metode
Saw Berbasis Web.” CAHAYAtech 8 (2): 136.
https://doi.org/10.47047/ct.v8i2.50.
Kurniawan, Ari, and Sukma Ellyana Rosa. 2020. “Rancang Bangun
Aplikasi Ujian Online Madrasah Aliyah Negeri Surabaya Berbasis
Website Dengan Framework Laravel.” Jurnal Manajemen Informasi 11
(1): 1–11.
Prasetyo, Andre Rivaldo, Meliana Christianti Johan, S Jurusan, Teknik
Informatika, and Fakultas Teknologi Informasi. 2022. “Aplikasi Berita
Acara Sidang Tugas Akhir Berbasis Web” 4 (November): 230–42.
Andy Febrianto, Achmadi Sentot, Agung Panji Sasmito, et al. 2021.
“Penerapan Metode K-Means Untuk Clustering Pengunjung
Perpustakaan Itn Malang.” Jurnal Mahasiswa Teknik Informatika 5 (1):
61–70.
Siregar, H. F., Siregar, Y. H., & Melani, M. (2018). 2018. “Perancangan
Aplikasi Komik Hadist Berbasis Multimedia. JurTI (Jurnal Teknologi
Informasi), 2(2), 113-121.” JurTI (Jurnal Teknologi Informasi), 2 (2):
113–21. http://www.jurnal.una.ac.id/index.php/jurti/article/view/425.
Suryadi, Rizky, Angga Pratama, and Rizky Putra Phonna. 2020. “Sistem
Informasi Manajemen Perbengkelan Jasa Servis Dan Penjualan Suku
Cadang Berbasis Web Dan Android Studi Kasus Di Farasat Jaya Motor
Kota Langsa.” Sisfo: Jurnal Ilmiah Sistem Informasi 4 (1): 37–58.
https://doi.org/10.29103/sisfo.v4i1.6273.
Nurmiati, Siti, and others. 2021. “Rancang Bangun Sistem Pelayanan Home
Service Pada Yoyena Optic Berbasis Web.” Jurnal Rekayasa Informasi
10 (2): 121–28.
Noviantoro, Agung, Amelia Belinda Silviana, Risma Rahmalia Fitriani, and
Hanum Putri Permatasari. 2022. “Rancangan Dan Implementasi
Aplikasi Sewa Lapangan Badminton Wilayah Depok Berbasis Web.”
Jurnal Teknik Dan Science 1 (2): 88–103.
https://doi.org/10.56127/jts.v1i2.108.
28
Suryadi, Rizky, Angga Pratama, and Rizky Putra Phonna. 2020. “Sistem
Informasi Manajemen Perbengkelan Jasa Servis Dan Penjualan Suku
Cadang Berbasis Web Dan Android Studi Kasus Di Farasat Jaya Motor
Kota Langsa.” Sisfo: Jurnal Ilmiah Sistem Informasi 4 (1): 37–58.
https://doi.org/10.29103/sisfo.v4i1.6
29
30