WEBSITE
Disusun Oleh :
Kelompok
Dosen Pengampu:
Ica Admirani, S.Kom., M.Kom.
Penulis,
i
DAFTAR ISI
KATA PENGANTAR ..............................................................................................................ii
DAFTAR ISI............................................................................................................................iii
BAB I ......................................................................................................................................... 1
PENDAHULUAN .................................................................................................................... 1
1.1 Latar Belakang ............................................................................................................ 1
BAB II ....................................................................................................................................... 1
LANDASAN TEORI ............................................................................................................... 1
1.2 Rumusan Masalah ....................................................................................................... 1
1.3 Tujuan Penulis ............................................................................................................. 1
1.4 Manfaat........................................................................................................................ 1
2.1 Tinjauan Pustaka ......................................................................................................... 2
2.2 Perangkat Yang Digunakan ......................................................................................... 2
2.2.1 XAMPP ..................................................................................................................... 2
2.2.2 Hypertext Markup Language ( HTML ) .............................................................. 2
2.2.3 Hypertext Preprocessor ( PHP ) ........................................................................... 3
2.2.4 Cascading Style Sheet CSS ..................................................................................... 3
2.2.5 Bootstrap .................................................................................................................. 3
2.2.6 MySQL ..................................................................................................................... 3
2.2.7 Visual Studio Code sebagai text editor .................................................................. 3
BAB III...................................................................................................................................... 5
DESAIN UI ............................................................................................................................... 5
3.1 Tampilan Halaman Utama .......................................................................................... 5
3.2 Tampilan Halaman Login............................................................................................ 6
3.3 Tampilan Daftar .......................................................................................................... 6
3.4 Tampilan Dashboard Admin ....................................................................................... 7
3.5 Tampilan Menu > Data Anggota................................................................................. 7
3.6 Tampilan Menu > Tambah Anggota > Info Dasar ...................................................... 8
3.7 Tampilan Menu >Tambah Anggota > Keluarga ......................................................... 8
3.8 Tampilan Menu > Tambah Anggota > Orang Tua...................................................... 9
3.9 Tampilan Menu > Tambah Anggota > Kontak ........................................................... 9
3.10 Tampilan Menu > Tambah Anggota > Akademik .................................................... 10
ii
3.11 Tampilan Menu > Akun ............................................................................................ 10
BAB IV .................................................................................................................................... 11
TAMPILAN WEBSITE ........................................................................................................ 11
4.1 Tampilan Halaman Utama ............................................................................................. 11
4.2 Tampilan Halaman Login............................................................................................... 11
4.3 Tampilan Daftar ............................................................................................................. 12
4.4 Tampilan Dashboard Admin .......................................................................................... 12
4.5 Tampilan Menu >Data Anggota..................................................................................... 13
4.6 Tampilan Menu > Tambah Anggota > Info Dasar ......................................................... 13
4.7 Tampilan Menu > Tambah Anggota > Keluarga ........................................................... 14
4.8 Tampilan Menu>Tambah Anggota>Orang Tua............................................................. 14
4.9 Tampilan Menu>Tambah Anggota> Kontak ................................................................. 15
4. 10 Tampilan Menu>Tambah Anggota>Akademik .......................................................... 15
4. 11 Tampilan Menu > Akun .............................................................................................. 16
BAB V ..................................................................................................................................... 16
PENUTUP............................................................................................................................... 16
iii
BAB I
PENDAHULUAN
1.1 Latar Belakang
Aplikasi berbasis web adalah aplikasi yang dikembangkan menggunakan bahasa
HTML, PHP, CSS, JS yang membutuhkan web server dan browser untuk menjalankannya
seperti Chrome, Firefox atau Opera. Aplikasi Web dapat berjalan pada jaringan internet
maupun intranet (Jaringan LAN), Data terpusat dan kemudahan dalam akses adalah ciri utama
yang membuat Aplikasi Web lebih banyak diminati dan lebih mudah diimplementasikan pada
berbagai bidang kehidupan. Website Ikatan Alumni (IKA) Teknik Komputer Politeknik Negeri
Sriwijaya ini merupakan salah satu website Organisasi yang mendata Data Alumni agar bisa
selalu Bersilaturahmi dengan baik.
Dengan website IKA Teknik Komputer ini, dosen dan teman teman lain tidak
kesusahan untuk mencari Data mahasiswa yang telah lulus mejadi Alumni. Aplikasi Ikatan
Alumni Teknik Komputer ini dapat mempermudah proses menginput data, mempermudah
memasukkan data dari alumni dan juga keamanan data lebih terjaga dan dapat meminimalisir
kepalsuan data. Informasi tentang Alumni yang selama ini sangat susah untuk dihubungi dan
hanya terhubung sampai lulus kuliah saja,memberikan ide bagi kami untuk membuat Website
Organisasi Ikatan Alumni yang bisa memberikan informasi agar terus menjaga tali silaturahmi.
Pada era perkembangan aplikasi web ini , kami berharap semoga pembuatan website ini dapat
memberikan kemudahan teman teman untuk mencari Informasi Alumni yang efisien. Untuk
itulah kami mencoba merancang dan membangun website Organisasi Ikatan Alumni ini.
Dengan latar belakang tersebut, maka penulis tertarik membuat suatu website
“Website Ikatan Alumni Teknik Komputer Politeknik Negeri Sriwijaya”
1
BAB II
LANDASAN TEORI
1.2 Rumusan Masalah
Dari uraian latar belakang diatas dapat ditarik beberapa rumusan masalah yaitu :
1. Bagaimana membuat Media Digital Pengelola Data berbasis Web?
2. Bagaimana membuat Website yang bisa menghasilkan rekapan berupa
Microsoft Word dan Excel?
1.3 Tujuan Penulis
Tujuan dari pembuatan website ini adalah :
- Merancang dan menghasilkan aplikasi berbasis website dalam ikatan alumni
mahasiswa Teknik Komputer
- Membantu pengurus Jurusan Teknik Komputer Politeknik Negeri
Sriwijaya agar mudah mencari Informasi tentang Alumni.
- Membantu Teman-Teman Jurusan Teknik Komputer Politeknik Negeri
Sriwijaya agar mudah mencari Informasi tentang Teman-Teman Alumni
lainnya.
- Mendata Alumni agar mudah untuk berkomunikasi dan silaturahami.
1.4 Manfaat
Adapun manfaat dari pembuatan website ini adalah :
- Mempermudah pendataan Alumni Teknik Komputer Polsri Palembang.
- Menghasilkan rekapan Data Alumni yang Efektif dan Efisien
- Membantu pengembangan teknologi web di bidang sosial masyarakat sekitar.
2
2.1 Tinjauan Pustaka
Web adalah sebuah penyebaran informasi melalui internet. Sebenarnya antara
www (world wide web) dan web adalah sama karena kebanyakan orang menyingkat
www menjadi web saja. Web merupakan hal yang tidak dapat dipisahkan dari dunia
internet. Melalui web, setiap pemakai internet bisa mengakses informasi-informasi di
situs web yang tidak hanya berupa teks, tetapi juga dapat berupa gambar, suara, film,
animasi, dll. Sebenarnya, web merupakan kumpulan-kumpulan dokumen yang banyak
tersebar di beberapa komputer server yang berada di seluruh penjuru dunia dan
trehubung menjadi satu jaringan melalui jaringan yang disebut internet.
Menurut Suwanto Raharjo, layanan web adalah salah satu Internet yang paling
banyak dipergunakan dibandingkan dengan layanan lain seperti ftp, gopher, news atau
bahkan email. Definisi Website menurut Hakim Lukmanul adalah fasilitas internet
yang menghubungkan dokumen dalam lingkup lokal maupun jarak jauh. Dokumen
pada website disebut dengan web page dan link dalam website memungkinkan
pengguna bisa berpindah dari satu page ke page lain (hyper text), baik diantara page
yang disimpan dalam server yang sama maupun server diseluruh dunia. Pages diakses
dan dibaca melalui browser seperti Netscape Navigator, Internet Explorer, Mozila
Firefox, Google Chrome dan aplikasi browser lainnya.
2.2 Perangkat Yang Digunakan
2.2.1 XAMPP
XAMPP merupakan web server yang mudah digunakan yang dapat melayani
tampilan halaman web yang dinamis dan dapat diakses secara lokal menggunakan web server
local (localhost).
2.2.2 Hypertext Markup Language ( HTML )
HTML atau Hypertext Markup Language adalah salah satu format yang digunakan
dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen ini dikenal
sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser.
Berdasarkan pengertian diatas dapat disimpulkan bahwa HTML (Hyper Text Markup
Language) adalah bahasa pemfomaat teks untuk dokumen-dokumen pada jaringan computer
yang sering disebut sebagai World Wide Web.
3
2.2.3 Hypertext Preprocessor ( PHP )
PHP berasal dari kata “Hypertext Preprocessor”,yaitu bahasa pemrogrman universal
untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan
bersamaan dengan HTML. Saat ini, PHP banyak dipakai untuk membuat program situs
web dinamis.
2.2.5 Bootstrap
Bootstrap adalah kerangka kerja CSS yang bersifat open source dan digunakan untuk
kebutuhan pembuatan tampilan desain visual dari aplikasi web atau situs website. Kerangka
kerja yang digunakan berbentuk template desain berbasis HTML dan CSS untuk kebutuhan
pengembangan navigasi, tombol, tipografi, formulir, dan komponen antarmuka yang lainnya.
2.2.6 MySQL
MySQL adalah sebuah database management system (manajemen basis data)
menggunakan perintah dasar SQL (Structured Query Language) yang cukup terkenal.
3
BAB III
DESAIN UI
Desain User Interface (UI) adalah proses yang digunakan desainer untuk
membuat tampilan dalam perangkat lunak atau perangkat terkomputerisasi, dengan
fokus pada tampilan atau gaya. Tujuan dari desainer UI adalah untuk membuat desain
antarmuka yang membuat pengguna mudah untuk digunakan dan menyenangkan.
4
3.2 Tampilan Halaman Login
Pada tampilan Halaman Daftar,Pengguna harus memasukan gmail dan password untuk
Daftar.
5
3.4 Tampilan Dashboard Admin
Pada halaman Dashboard Admin terdapat beberapa menu yaitu Pencarian Anggota, Data
Anggota,Tambah Anggota dan dihalaman ini terdapat Grafik anggota .
6
3.6 Tampilan Menu > Tambah Anggota > Info Dasar
Pada Halaman Tambah Anggota terdapat form info dasar, Keluarga , Orang Tua,
Kontak , Akademik Alumni yang harus di isi agar data nya bisa tersimpan. Ini adalah
tampilan dari Form Info Dasar.
7
3.8 Tampilan Menu > Tambah Anggota > Orang Tua
Pada Halaman tambah data Orang tua ini ber-isi kan Data Orangtua dan Alamat.
8
3.10 Tampilan Menu > Tambah Anggota > Akademik
Pada tampilan menu Tambah Anggota Akademik terdapat informasi akademik alumni selama
berkuliah di jurusan Teknik Komputer Polsri.
9
BAB IV
TAMPILAN WEBSITE
4.1 Tampilan Halaman Utama
Pada tampilan Halaman Utama, pengguna bisa mencari anggota dengan
Nama,Angkatan,Kota,Tahun Masuk,Dan Tahun Keluar. Dan silakan klik bisa langsung
ke menu Login disebelah kanan atas.
10
4.3 Tampilan Daftar
Pada tampilan Halaman Daftar,Pengguna harus memasukan gmail dan password
untuk Daftar.
11
4.5 Tampilan Menu >Data Anggota
Pada tampilan Data Anggota terdapat kotak pengelolaan data Alumni
12
4.7 Tampilan Menu > Tambah Anggota > Keluarga
Pada tampilan halaman Tambah anggota bagian keluarga terdapat kotak data keluarga
suami/istri dan data anak.
13
4.9 Tampilan Menu>Tambah Anggota> Kontak
Pada Halaman tambah data Kontak ini berisi kontak alumni seperti No. Hp dan Sosial
media lainnya.
14
4. 11 Tampilan Menu > Akun
Pada tampilan menu Akun ini berisikan informasi username dan password pengguna.
15
BAB V
PENUTUP
KESIMPULAN
Berdasarkan Penjelasan Design UI pada BAB III dan Pemaparan Tampilan Website
pada BAB IV, kami selaku penulis laporan ini telah berhasil membuat Website Organisasi Ikatan
Alumni Teknik Komputer Politeknik Negeri Sriwijaya Palembang. Pada BAB I bagian Tujuan
bisa dilihat beberapa tujuan kami dalam membangun Website ini antara lain, Merancang dan
menghasilkan aplikasi berbasis website dalam Organisasi Ikatan Alumni mahasiswa Teknik
Komputer, Membantu pengurus Jurusan Teknik Komputer Politeknik Negeri Sriwijaya agar
mudah mencari Informasi tentang Alumni. Membantu Teman-Teman Jurusan Teknik
Komputer Politeknik Negeri Sriwijaya agar mudah mencari Informasi tentang Teman-Teman
Alumni lainnya.Mendata Alumni agar mudah untuk berkomunikasi dan silaturahami. Besar
harapan kami agar website ini bisa kami kembangkan lebih besar lagi agar bisa membantu
banyak bidang yang nantinya akan membutuhkan system pendataan Informasi Alumni yang
Efektif dan Efisien.
SARAN
Kami selaku penulis sangat sadar bahwa masih banyak kekurangan dari
website kami seperti belum ada login user dan desainnya masih sangat sederhana
16
DAFTAR PUSTAKA
Affandi Khaerul, ”Mengenal apa itu Xamp,Apache,PHP,dan MySQL” ,
http://khaerulaffandi.weebly.com/mengenal-apa-itu-xamppapachephp-dan-mysql.html/
Terakhir diakses pada tanggal 5 Januari 2023 pukul 21.58
Syahid Bilal, 2022. “Pengertian Website – Sejarah, Jenis, Manfaat, Unsur, Tahapan,
Fungsi, Para Ahli” https://www.gurupendidikan.co.id/pengertian-website/ Terakhir
diakses pada tanggal 7 Januari 2023 pukul 13.34
Hendri Asep, Dkk. 2021 “Jurnal Computer Science and Information Technology
(CoSciTech)” https://ejurnal.umri.ac.id/index.php/coscitech/article/download/2393/1459
Terakhir diakses pada tanggal 20 januari pukul 15.40
17