Anda di halaman 1dari 23

APLIKASI IKATAN ALUMNI TEKNIK KOMPUTER BERBASIS

WEBSITE

Diajukan untuk memenuhi tugas Ujian Akhir Semester


Mata Kuliah Praktek Pemrograman Berbasis Web 2

Disusun Oleh :
Kelompok

Chairina Al Islami 062130701733


Feni Mutiara Rubita 062130700215

Dosen Pengampu:
Ica Admirani, S.Kom., M.Kom.

PROGRAM STUDI DIII TEKNIK KOMPUTER


JURUSAN TEKNIK KOMPUTER
POLITEKNIK NEGERI SRIWIJAYA
TAHUN AJARAN 2022/2022
KATA PENGANTAR
Puji dan syukur penulis panjatkan kehadirat Allah SWT atas segala karunia dan rahmat-
Nya sehingga penulis dapat menyelesaikan laporan yang berjudul “APLIKASI IKATAN
ALUMNI TEKNIK KOMPUTER BERBASIS WEBSITE” dapat diselesaikan dengan baik.
Tujuan dari penulisan projek ini adalah untuk memenuhi tugas Ujian Akhir Semester
pada Mata Kuliah Praktek Pemrograman Berbasis Web 2.
Terlebih dahulu, saya mengucapkan terima kasih kepada Ibu Ica Admirani, S.Kom.,
M.Kom. selaku Dosen Praktek Pemrograman Berbasis Web 2 yang telah memberikan tugas
ini sehingga dapat menambah pengetahuan dan wawasan sesuai dengan bidang studi yang
penulis tekuni.
Saya juga mengucapkan terima kasih kepada semua pihak yang telah membantu, terima
kasih atas bantuannya sehingga sehingga saya dapat menyelesaikan tugas ini.
Kemudian, penulis menyadari bahwa tugas yang saya tulis ini masih jauh dari kata
sempurna. Oleh karena itu, kritik dan saran yang membangun kami butuhkan demi
kesempurnaan laporan ini.

Palembang, 5 Januari 2023

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.4 Cascading Style Sheet CSS


CSS adalah singkatan dari Cascading Style Sheet. Kegunaan CSS yaitu untuk
mengatur tampilan dokumen HTML, sebagai contoh pengaturan jarak antar baris, teks,
format border, warna bahkan hingga penampilan file gambar.

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.

2.2.7 Visual Studio Code sebagai text editor


Visual Studio Code (VS Code) adalah sebuah teks editor ringan dan handal yang dibuat
oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux,
Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman
JavaScript, Typescript, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat
dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).
Bahasa pemrograman HyperText Markup Language (HTML). Pembuatan website
menggunakan pemrograman Hypertext Preprocessor (PHP), dan untuk desain menggunakan
Cascading Style Sheets (CSS),bootstrap,JavaScript. MySql sebagai database untuk
penyimpanan data. Hasil dari studi kasus ini adalah Sistem Informasi Pada Bisnis Toko Egil
Berbasis Website yang menyediakan informasi mengenai stok barang,harga barang,
3
pemesanan berbasis online,dan pada admin menyediakan laporan pemesanan barang oleh
konsumen,dapat menginput barang melalui Website yang telah dibuat,dan mengelola data
produk.

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.

3.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.

4
3.2 Tampilan Halaman Login

Pada tampilan Halaman Login, pengguna harus memasukkan username dan


password,namun jika belum memiliki akun, silakan klik daftar pada kanan atas.

3.3 Tampilan Daftar

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 .

3.5 Tampilan Menu > Data Anggota


Pada tampilan Data Anggota terdapat kotak pengelolaan data Alumni

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.

3.7 Tampilan Menu >Tambah Anggota > Keluarga


Pada tampilan halaman Tambah anggota bagian keluarga terdapat kotak data keluarga
suami/istri dan data anak.

7
3.8 Tampilan Menu > Tambah Anggota > Orang Tua
Pada Halaman tambah data Orang tua ini ber-isi kan Data Orangtua dan Alamat.

3.9 Tampilan Menu > Tambah Anggota > Kontak


Pada Halaman tambah data Kontak ini berisi kontak alumni seperti No. Hp dan Sosial
media lainnya.

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.

3.11 Tampilan Menu > Akun


Pada tampilan menu Akun ini berisikan informasi username dan password pengguna.

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.

4.2 Tampilan Halaman Login


Pada tampilan Halaman Login, pengguna harus memasukkan username dan
password,namun jika belum memiliki akun, silakan klik daftar pada kanan atas.

10
4.3 Tampilan Daftar
Pada tampilan Halaman Daftar,Pengguna harus memasukan gmail dan password
untuk Daftar.

4.4 Tampilan Dashboard Admin


Pada halaman Dashboard Admin terdapat beberapa menu yaitu Pencarian Anggota, Data
Anggota,Tambah Anggota dan dihalaman ini terdapat Grafik anggota .

11
4.5 Tampilan Menu >Data Anggota
Pada tampilan Data Anggota terdapat kotak pengelolaan data Alumni

4.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.

12
4.7 Tampilan Menu > Tambah Anggota > Keluarga
Pada tampilan halaman Tambah anggota bagian keluarga terdapat kotak data keluarga
suami/istri dan data anak.

4.8 Tampilan Menu>Tambah Anggota>Orang Tua


Pada Halaman tambah data Orang tua ini ber-isi kan Data Orangtua dan Alamat.

13
4.9 Tampilan Menu>Tambah Anggota> Kontak
Pada Halaman tambah data Kontak ini berisi kontak alumni seperti No. Hp dan Sosial
media lainnya.

4. 10 Tampilan Menu>Tambah Anggota>Akademik


Pada tampilan menu Tambah Anggota Akademik terdapat informasi akademik alumni
selama berkuliah di jurusan Teknik Komputer Polsri.

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

Yosua Reinert Rumagit, “PENGENALAN PEMROGRAMAN WEB DASAR”


https://binus.ac.id/mooc/course/pengenalan-pemrograman-web-dasar/ Terakhir diakses pada
tanggal 7 januari pukul 20.00

Anonim, 2023 “JavaScript” https://id.wikipedia.org/wiki/JavaScript Terakhir diakses pada


tangggal 9 januari pukul 18.00

Firman Astria, 2016 “Sistem Informasi Perpustakaan Online Berbasis Web”


https://ejournal.unsrat.ac.id/index.php/elekdankom/article/viewFile/11657/11249 Terakhir
diakses pada tanggal 18 januari pukul 12.00

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

Anda mungkin juga menyukai