LAPORAN

PRAKTIKUM PEMROGRAMAN BERBASIS INTERNET

MEMBUAT APLIKASI CAMPUSSINGER BERBASIS WEB
MENGGUNAKAN PHP DAN MYSQL

Diajukan Sebagai Syarat Memenuhi Kelulusan

Mata Kuliah Praktikum Pemrograman Berbasis Internet

Disusun Oleh:
BAYU (191055201118)

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS IBNU SINA
2021
 HALAMAN PENGESAHAN LAPORAN PRAKTIKUM
PEMROGRAMAN BERBASIS INTERNET
APLIKASI CAMPUSSINGER BERBASIS WEB MENGGUNAKAN PHP
DAN MYSQL

Diajukan Sebagai Syarat Kelulusan Pada Matakuliah Praktikum Pemrograman

Berbasis Internet Pada Program Studi Teknik Informatika Fakultas Teknik

Disusun Oleh

Nama : Bayu

NPM : 191055201118

Program Studi : Teknik Informatika

Telah diperiksa dan disetujui oleh Dosen Pengampu dan Ka. Lab

Teknik Informatika pada tanggal ...................................... Juli 2021

Kepala Laboratorium Dosen Pengampu

Teknik Informatika Mata Kuliah

Hanafi, S.Kom., M.Kom Keti, S.Kom

NIDK. 8873810016 NIK.20200212

Mengetahui
Ketua Program Studi Teknik Informatika

OktaVeza, M.Kom
NIDN.1011108902

2
 MOTTO

“Bekerja Keraslah Sampai Kesuksesan Ada Pada Genggamanmu”

3
4
 KATA PENGANTAR

Assalamu’alaikum Wr.Wb

Puji syukur kami ucapkan atas kehadirat Allah SWT karena dengan segala
berkat dan rahmat yang dilimpahkan-Nya kami dapat menyelesaikan laporan
Praktikum Pemrograman Berbasis Internet. Tak lupa pula shalawat dan salam
penulis panjatkan kepada Nabi akhir zaman Muhammad S.A.W, karena berkat
perjuangannyalah karunia Iman dan Islam senantiasa menjadi inspirasi bagi
penulis.

Adapun maksud penulisan Laporan Praktikum ini adalah sebagai gambaran

terhadap apa yang penulis kerjakan pada laporan. Selain itu juga laporan ini
sebagai syarat untuk kelulusan mata kuliah Praktek Pemrograman Berbasis
Internet dalam menyelesaikan tugas akhir semseter.

Selama penyusunan Laporan ini, penulis telah banyak memperoleh bantuan

dan bimbingan dari berbagai pihak. Pada kesempatan ini kami ingin
menyampaikan rasa hormat dan terima kasih kepada :

1. Bapak H. Andi Ibrahim, BA selaku Ketua Yayasan Pendidikan Ibnu Sina

Batam.

2. Bapak DR. Mustaqim Syuaib, SE, MM Selaku Rektor Universitas Ibnu

Sina.

3. Bapak Dr. Ir. Larisang, MT, IPM Selaku Dekan Fakultas Teknik
Universitas Ibnu Sina.

4. Bapak Okta Veza, M.Kom Selaku Ketua Program Studi Teknik

Informatika .

5
 5. Bapak Hanafi, M.Kom Selaku Kepala Laboratorium Teknik Informatika
Fakultas Teknik.

6. Bapak Keti, S. Kom Selaku Dosen Mata KuliahPemrograman Berbasis

Internet Studi Teknik Informatika Fakultas Teknik.

7. Kepada diri saya sendiri selaku yang menulis laporan ini.

8. Kepada kelas 4B selaku teman yang selalu memberi saran dan

mengingatkan kami agar selalu semangat dalam mengerjakan laporan ini.

9. Kepada seluruh pihak yang tidak dapat disebut satu persatu yang telah
membantu kami dalam penyelesaian laporan ini.
Kami menyadari bahwa masih banyak kekurangan dalam penulisan
Laporan Praktikum ini. Oleh karena itu, kami sangat mengharapkan kritik dan
saran yang membangun dari semua pihak untuk penyempurnaan penulisan
laporan ini.

Wassalamu’alaikum Wr.Wb.

Batam, Juli 2021

Bayu
191055201118

6
 DAFTAR ISI

LAPORAN PRAKTIKUM.............................................................................. i

HALAMAN PENGESAHAN.......................................................................... ii

MOTTO............................................................................................................. iii

KATA PENGANTAR...................................................................................... iv

DAFTAR ISI..................................................................................................... vi

DAFTAR GAMBAR........................................................................................ x

DAFTAR TABEL............................................................................................. xi

BAB I PENDAHULUAN.............................................................................I-1

1.1 Latar Belakang...................................................................................I-1

1.2 Rumusan Masalah..............................................................................I-2

7
 1.3 Tujuan Penulisan................................................................................I-2
1.4 Manfaat Penulisan..............................................................................I-2
1.5 Sistematika Penulisan........................................................................I-2

BAB II LANDASAN TEORI........................................................................II-1

2.1 HTML.................................................................................................II-1

2.1.1 Kelebihan HTML........................................................................II-1

2.1.2 Kekurangan HTML.....................................................................II-2

2.1.3 Contoh Penulisan Kode HTML...................................................II-3

2.2 Database.............................................................................................II-3

2.2.1 Kelebihan Database....................................................................II-3

2.2.2 Kekurangan Database.................................................................II-3

2.2.3 Contoh Penggunaan Database....................................................II-4

2.3 CSS...................................................................................................II-4

2.3.1 Kelebihan CSS............................................................................II-5

2.3.2 Kekurangan CSS........................................................................II-5

2.3.3 Contoh Penggunaan CSS............................................................II-5

8
2.4 PHP.....................................................................................................II-6

2.4.1 Kelebihan PHP...........................................................................II-7

2.4.2 Kekurangan PHP........................................................................II-7

2.4.3 Contoh Penggunaan PHP...........................................................II-7

2.5 MySQL...............................................................................................II-8

2.5.1 Kelebihan MySQL.....................................................................II-9

2.5.2 Kekurangan MySQL.................................................................II-9

2.5.3 Contoh Penggunaan MySQL.....................................................II-9

2.6 Adobe Dreamweaver....................................................................…II-10

2.6.1 Kelebihan Adobe Dreamweaver.........................................…II-12

2.6.2 Kekurangan Adobe Dreamweaver.....................................…II-12

2.6.3 Contoh Penggunaan Adobe Dreamweaver.........................…II-12

2.7 XAMPP........................................................................................…II-13

2.7.1 Kelebihan XAMPP…….....................................................…II-13

2.7.2 Kekurangan XAMPP..........................................................…II-13

9
 2.7.3 Contoh Penggunaan XAMPP.............................................…II-13

2.8 phpMyAdmin...............................................................................…II-15

2.8.1 Kelebihan phpMyAdmin...................................................…II-16

2.8.2 Kekurangan phpMyAdmin................................................…II-16

2.8.3 Contoh Penggunaan phpMyAdmin...................................…II-17

2.9 Flowchart......................................................................................…II-17

2.9.1 Kelebihan Flowchart.........................................................…II-17

2.9.2 Kekurangan Flowchart…..................................................…II-18

2.9.3 Contoh Penggunaan Flowchart..........................................…II-18

BAB III METODE PERANCANGAN..................................................…..III-1

3.1 Flowchart...........................................................................................III-1

3.2 Rancangan Database Pada phpMyAdmin.........................................III-2

3.2.1 Rancangan Tabel....................................................................III-2

3.2.2 Relationship Database............................................................III-2

3.2.3 Database Kampusku...............................................................III-3

10
 3.2.4 Tabel Nilai Point.....................................................................III-3

3.2.5 Tabel Siswa...............................................................................III-3

3.2.6 Tabel User.................................................................................III-4

3.3 Rancangan Desain Dan Program........................................................III-4

3.3.1 Rancangan Login.......................................................................III-4

3.3.2 Rancangan Tampilan Utama.....................................................III-5

3.3.3 Rancangan Data Mahasiswa/Peserta.........................................III-6

3.3.4 Rancangan Input Data Mahasiswa/Peserta................................III-7

3.3.5 Rancangan Update Data Mahasiswa/Peserta.............................III-8

3.3.6 Rancangan Delete Data Mahasiswa/Peserta..............................III-9

3.3.7 Rancangan Data Hasil Penampilan....................................…..III-10

3.3.8 Rancangan Input Data Hasil Penampilan...........................….III-11

3.3.9 Rancangan Update Data Hasil Penampilan........................….III-12

3.3.10 Rancangan Delete Data Hasil Penampilan.........................….III-13

3.3.11 Rancangan Data Pemenang................................................….III-14

11
 3.3.12 Rancangan Video Penampilan….......................................….III-15

3.3.13 Rancangan Logout…..........................................................….III-16

BAB IV HASIL DAN PEMBAHASAN................................................……IV-1

4.1 Program Berbasis Web........................................................................IV-1

4.2 Pembahasan Program..........................................................................IV-6

BAB V KESIMPULAN DAN SARAN.......................................................V-1

5.1 Kesimpulan..........................................................................................V-1

5.2 Saran....................................................................................................V-1

DAFTAR PUSTAKA

12
 DAFTAR GAMBAR

Gambar 2.1 Contoh Penggunaan Kode HTML............................................II-3

Gambar 2.2 Contoh Database........................................................................II-4

Gambar 2.3 Contoh Penggunaan CSS..........................................................II-5

Gambar 2.4 Output Hasil Penggunaan CSS.................................................II-6

Gambar 2.5 Contoh Penggunaan PHP..........................................................II-8

Gambar 2.6 Contoh Penggunaan MySQL.....................................…………….II-10

Gambar 2.7 Create Tabel Transaksi.....................................................……II-10

Gambar 2.8 Menu Tampilan Login Pada Adobe Dreamweaver.........…..II-12

Gambar 2.9 XAMPP................................................................................…..II-14

13
Gambar 2.10 Dashboard XAMPP..........................................................…..II-15

Gambar 2.11 Contoh Database Pada Penggunaan phpMyAdmin......…..II-17

Gambar 2.12 Flowchart Untuk Menghitung Luas Lingkaran............…..II-18

Gambar 3.1 Flowchart.............................................................................…..III-1

Gambar 3.2 Relationship Database........................................................…..III-1

Gambar 3.3 Database Kampusku...........................................................…..III-2

Gambar 3.4 Tabel Nilai Point..................................................................…..III-3

Gambar 3.5 Tabel Siswa .........................................................................…..III-4

Gambar 3.6 Tabel User............................................................................…..III-4

Gambar 3.7 Rancangan Desain Program..............................................…..III-4

Gambar 3.8 Rancangan Program Login................................................…..III-5

Gambar 3.9 Rancangan Desain Tampilan Utama.................................…..III-5

Gambar 3.10 Rancangan Program Tampilan Utama...........................…..III-6

Gambar 3.11 Rancangan Desain Data Mahasiswa...............................…..III-6

14
Gambar 3.12 Rancangan Program Data Mahasiswa............................…..III-7

Gambar 3.13 Rancangan Desain Input Data Mahasiswa ....................…..III-7

Gambar 3.14 Rancangan Program Input Data Mahasiswa.................…..III-8

Gambar 3.15 Rancangan Desain Update Data Mahasiswa...................…III-8

Gambar 3.16 Rancangan Program Update Data Mahasiswa...............…III-9

Gambar 3.17 Rancangan Desain Delete Data Mahasiswa.....................…III-9

Gambar 3.18 Rancangan Program Delete Data Mahasiswa.............……..III-10

Gambar 3.19 Rancangan Desain Data Hasil Penampilan..................……III-10

Gambar 3.20 Rancangan Program Data Hasil Penampilan...............…..III-10

Gambar 3.21 Rancangan Desain Input Data Hasil Penampilan.........…..III-11

Gambar 3.22 Rancangan Program Input Data Hasil Penampilan.....…..III-11

Gambar 3.23 Rancangan Desain Update Data Hasil Penampilan......…..III-12

Gambar 3.24 Rancangan Program Update Data Hasil Penampilan. .….III-12

Gambar 3.25 Rancangan Desain Delete Data Hasil Penampilan........….III-13

Gambar 3.26 Rancangan Program Delete Data Hasil Penampilan....….III-13

15
Gambar 3.27 Rancangan Desain Data Pemenang................................….III-14

Gambar 3.28 Rancangan Program Data Pemenang............................….III-14

Gambar 3.29 Rancangan Desain Video Penampilan ...........................….III-15

Gambar 3.30 Rancangan Program Video Penampilan........................….III-16

Gambar 3.31 Rancangan Desain Logout...............................................….III-16

Gambar 3.32 Rancangan Program Logout...........................................….III-17

Gambar 4.1 Link Program Pada Browser..................................................IV-1

Gambar 4.2 Tampilan Login....................................................................…IV-1

Gambar 4.3 Tampilan Utama...................................................................…IV-2

Gambar 4.4 Input Data Mahasiswa.........................................................…IV-2

Gambar 4.5 Tampilan Data Mahasiswa..................................................…IV-3

Gambar 4.6 Tampilan Utama Update Data Mahasiswa........................…IV-3

Gambar 4.7 Tampilan Data Pemenang ..................................................…IV-4

Gambar 4.8 Tampilan Data Hasil Penampilan Peserta........................…IV-4

16
Gambar 4.9 Tampilan Update Data Hasil Penampilan Peserta...........…IV-5

Gambar 4.10 Tampilan Video Penampilan.............................................…IV-5

Gambar 4.11 Tampilan Logout................................................................…IV-6

DAFTAR TABEL

Gambar 3.1 Rancangan Tabel................................................................…..III-2

17