1

II. BAB I
PENDAHULUAN

1.1 Latar Belakang

Dalam dunia industri yang maju sangat pesat ini, tidak menutup
kemungkinan dari hasil karya sekumpulan manusia yang mempuyai suatu
tujuan. Di masa yang sudah canggih ini kita sering menggunakan Web (website
atau situs) dapat diartikan sebagai kumpulan halaman yang menampilkan
informasi data teks, data gambar diam atau gerak, data animasi, suara, video
dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis
yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat
statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya
searah hanya dari pemilik website.Bersifat dinamis apabila isi informasi
website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal
dari pemilik serta pengguna website. Contoh website statis adalah berisi profil
perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll.
Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh
pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna
maupun pemilik.
Website ini digunakan untuk mencari tahu informasi yang kita butuhkan,
bahkan kita bisa berkomunikasi dengan orang lain pun lewat jejaring sosial. Di
dalam kita berselancar di dunia maya kita memerlukan browser untuk mencari
informasi apa yang kita inginkan di dunia maya. Lewat browserterdapat script
– script yang di mengerti oleh computer.Dan penulis membahasnya dalam
laporan praktikum ini yaitu mengenai HTML (Hyper Text Markup Language),
CSS (Cascading Style Sheets), dan PHP(HyperText Preprocessor).
 2

1.2 Rumusan Masalah

1. Bagaimana cara membuat program berbasis web dengan menggunakan PHP

dan Mysql?

2. Bagaimana cara Mengimplementasikan bahasa pemrograman PHP (HyperText

Preprocessor)?

3.Bagaimana hasil dari program aplikasi campussinger berbasis web

menggunakan php dan MySQL.

1.2 Tujuan Penulisan

1. Tujuan dibuatnya laporan praktikum ini adalah untuk memenuhi tugas mata
kuliah pemrograman web dan untuk berbagi ilmu kepada para pembaca.
2 Mengimplementasikan bahasa pemrograman PHP (HyperText Preprocessor)
3 Untuk mengetahui hasil dari program aplikasi campussinger berbasis web
menggunakan php dan MySQL.
1.4 Manfaat Penulisan

Hasil analisa terhadap laporan yang didapat ini diharapkan dapat

mempermudah bagi pihak-pihak yang memerlukan data dimasa yang akan datang.
Adapun manfaat dari penulisan laporan praktikum ini adalah sebagai berikut :
1. Bagi kampus, sebagai bahan kajian dalam melakukan praktikum perangkat
keras yang masih relevan serta membantu dalam proses pembelajaran
praktikum di dalam laboratorium Universitas Ibnu Sina.
2. Bagi Praktikum, Laporan ini sebagai bahan evaluasi dalam pelaksanaan
praktikum. Penelitian ini diharapkan mampu memperlancar kegiatan
praktikum di laboratorium.
3. Bagi diri sendiri dan mahasiswa untuk menghasilkan laporan praktikum
yang selanjutnya dapat digunakan sebagai bahan acuan bagi mahasiswa
lainnya bagi yang ingin melakukan penelitian lanjutan.

1.5 Sistematika Penulisan

Secara garis depan penulisan laporan praktikum ini adalah sebagai berikut:
 3

BAB I PENDAHULUAN
Dalam bab ini diuraikan mengenai latar belakang masalah, identifikasi
masalah, batasan dan rumusan masalah, tujuan dan manfaat dan sistematika
penulisan.

BAB II LANDASAN TEORI

Dalam bab ini diuraikan mengenai tentang landasan teori yaitu : Pembahasan
mengenai HTML, PHP , Mysql ,XAMPP, Database, dan lainnya.

BAB III METODE PERANCANGAN

Dalam bab ini diuraikan mengenai proses proses rancangan design, rancangan
program, dan rancangan database

BAB IV HASIL DAN PEMBAHASAN

Dalam bab ini menguraikan tentang bagaimana implementasi praktikum yang
sudah di bahas pada bab sebelumnya.

BAB V PENUTUP
Bab ini berisikan tentang kesimpulan dan saran praktikum pada laporan ini.

DAFTAR PUSTAKA
Tulisan yang tersusun di akhir sebuah karya ilmiah yang berisi nama penulis,
judul tulisan, penerbit, identitas penerbit dan tahun terbit sebagai sumber atau
rujukan seorang penulis.
 1

III. BAB II
LANDASAN TEORI

2.1 HTML
Menurut (Endra & Aprilita, 2018), HTML atau Hypertext Markup
Languange merupakan salah satu bahasayang biasa digunakan oleh
pengguna dalam membuat tampilan yang digunakan oleh web
application.
HTML merupakan singkatan dari Hypertext Markup
Language.HTML digunakan untuk membangun halaman web. HTML
digunakan untuk melakukan mark-up (penandaan) terhadap sebuah
dokumen teks. Tanda tersebut digunakan untukmenentukan format atau
style dari teks yang ditandai halaman web dibangun oleh kode-kode
HTML.
HTML adalah bahasa markup yang umum digunakan.Kepopuleran
HTML disebakan karena HTML ini mudah digunakan. Pembuatan
dokumen web dengan HTML dapat dilakukan dengan mudah dan cepat.
Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh
dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan
halaman web baik berupa teks, gambar, suara, animasi maupun video.
HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan web browser
seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga
dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan
program lain yang memiliki kemampuan browser.

2.1.1 Kelebihan HTML

1. Merupakan bahasa penkodean yang lintas platform (cross platform),
maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer
 2

yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi
bersifat fleksibel karena ditulis cukup dengan menggunakan editor
karakter ASCII.

2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi)

termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini
digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-
titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva
tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain,
atau link ke halaman di luar web yang bersangkutan.

3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari
Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini,
browser harus memiliki plug-in khusus untuk menjalankan file-file
animasi ini).

4.Dapat disisipi bahasa pemrograman untuk mempercantik halaman

web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan
sebagainya.
Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler.
Cara menjalanakannya cukup dengan menggunakan browser.

2.1.2 Kekurangan HTML

1. Menghasilkan halaman yang statis, yang saya tahu untuk

memperoleh halaman yang dinamis harus menggunakan bahasa
pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti
Flash atau Shockwave.
2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari
untuk yang masih awam.
Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini
maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu,
 3

HTML harus disisipi bahasa pemrograman yang dapat menangani hal

tersebut, contohnya Perl atau Tcl.

2.1.3 Contoh Penulisan Kode HTML

Berikut ini contoh sederhana penulisan kode HTML:

Gambar 2.1 Contoh penulisan kode HTML

2.2 Database
Menurut (Hesananda et al., 2017), Database ialah suatu wadah untuk
menampung sebuah data yang ada pada sebuah sistem. Database juga
bias diartikan sebagai kumpulan data. Database juga biasa dikenal
formal dan tegas. Database juga bias diartikan dengan kumpulan data
yang terintegrasi yang dapat dimanipulasi, diambil dan dicari secara
cepat
2.2.1 Kelebihan Database
1. Dapat mengontrol redunansi (pengulangan) data

2. Konsistensi data meningkat

3. Mendapatkan informasi lebih banyak dari jumlah data yang sama

4. Menambah integritas data dan Meningkatkan konkurensi

 4

5. Pembagian data menjadi lebih mudah.

2.2.2 Kekurangan Database

1. Kompleksitas, bila dilihat dari sisi perangkat lunaknya

2. Membutuhkan ruang penyimpanan yang lebih besar

3. Harga dari perangkat lunak DBMS yang handal. (Meskipun

terdapat DBMS yang bebas digunakan

4. Kinerja, kecepatan relatif lebih lambat dibanding file-based

5.B ila sebelumnya menggunakan sistem non-database, maka proses

konversi akan memakan banyak waktu dan biaya .

2.2.3 Contoh Penggunaan Database

Sebagai contoh, kasus dalam sebuah organisasi akademik sebuah
kampus, ada objek mahasiswa , dosen, dan mata kuliah. Objek dalam
perguruan tinggi dapata dikatakan sebagai mahasiswa jika memiliki
attribut atau field seperti nim, nama, dan jurusan, seperti yang
diimplementasikan dalam bentuk tabel seperti gambar berikut ini.

Gambar 2.2 Contoh Database

2.3 CSS
Menurut (Wahyudi, 2017), CSS adalah suatu Bahasa pemrograman
 5

web yang digunakan untuk mengendalikan dan membangun berbagai

komponen dalam web sehingga tampilan web akan lebih rapi,
terstruktur, dan seragam.

2.3.1 Kelebihan CSS (Cascading Style Sheet)

1. Dapat digunakan untuk memisahkan dalam pembuatan dokumen

( HTML dan CSS) dan Mempermudah dan mempersingkat dalam
pembuatan dan pemeliharaan dakumen web.
2. Fleksibel dalam penggunaannya dan interaktif serta nyaman
dipandang dan Dapat digunakan pada semua browser
3. Ukuran file kecil sehingga bandwidth yang dibutuhkan otomatis
lebih kecil

2.3.2 Kekurangan CSS

1. Ada beberapa browser lama tidak kompatible dengan CSS Dan Di
butuhkan waktu yang cukup lama dalam mendesain dan membuatnya

2. Harus Tahu dalam penggunaannya dan Tidak semua browser dapat

mengartikan kode CSS dengan cara yang sama, sehingga tampilan pada
web dengan CSS terlihat baik pada browser yang satu, tetapi berantakan di
browser yang lain.

2.3.3 Contoh Penggunaan CSS

 6

Gambar 2.3 Contoh Penggunaan CSS

Hasilnya seperti dibawah ini:

Gambar 2.4 Output Hasil Penggunaan CSS

2.4 PHP

Supono dan Putratama (2016:3) mengemukakan bahwa ”PHP (PHP:

Hypertext Preprocessor) adalah suatu bahasa pemrograman yang
digunakan untuk menerjemahkan baris kode program menjadi kode mesin
 7

yang dapat dimengerti oleh komputer yang berbasis server-side yang dapat
ditambahkan ke dalam HTML”.

Sedangkan, menurut Solichin (2016:11) mengemukakan bahwa “PHP

merupakan salah satu bahasa pemrograman berbasis web yang ditulis oleh
dan untuk pengembang web”.

PHP adalah sebuah bahasa pemrograman yang didesain agar dapat

disisipkan dengan mudah ke halaman HTML. PHP memberikan solusi
sangat murah (karena gratis digunakan) dan dapat berjalan di berbagai
jenis platform. Pada awalnya memang PHP berjalan di sistem UNIX dan
variannya, namun kini dapat berjalan dengan lancar di lingkungan system
operasi windows. Suatu nilai tambah yang luar biasa karena proses
pengembangan program berbasis web dapat dilakukan lintas system
operasi.

Dengan luasnya cakupan system operasi yang mampu menjalankan

PHP dan ditambah begitu lengkapnya function yang dimilikinya (tersedia
lebih dari 400 function di PHP yang sangat berguna) tidak heran jika PHP
semakin menjadi tren di kalangan programmer web.

2.4.1 Kelebihan PHP

1. Memiliki Community yang besar
2. Mudah Dipelajari
3. Pengembangan Cepat
4. Ringkas
5. Maintenance mudah

2.4.2 Kekurangan PHP

1. Banyak kompetisi

2. Mudah di bajak

3. Terkesan kurang prestigious

 8

4. Tidak adanya type data pada PHP

2.4.3 Contoh Penggunaan PHP

Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list

dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita
bisa membuatnya secara manual seperti kode berikut ini:

Gambar 2.5 Contoh Penggunaan PHP

2.5 MySQL

Menurut (Arizona, 2017) “MySQL adalah bahasa yang digunakan

untuk mengelola data pada RDBMS”. Sedangkan menurut (Risdiansyah,
2017) “MySQL merupakan database server yang bersifat multiuser dan
multi-threaded. SQL adalah bahasa database standar yang memudahkan
penyimpanan, pengubahan dan akses informasi.

MySQL adalah komponen penting dari open source enterprise stack

yang disebut LAMP. LAMP adalah platform pengembangan web yang
menggunakan Linux sebagai sistem operasi, Apache sebagai server web,
MySQL sebagai sistem manajemen database relasional, dan PHP sebagai
 9

bahasa scripting berorientasi objek. Saat ini, MySQL adalah RDBMS di

belakang banyak situs web teratas di dunia dan banyak aplikasi berbasis
web yang dihadapi oleh perusahaan dan konsumen, termasuk Facebook,
Twitter, dan YouTube.

MySQL didasarkan pada model client-server. Inti dari MySQL adalah

server MySQL, yang menangani semua instruksi (atau perintah) database.
Server MySQL tersedia sebagai program terpisah untuk digunakan dalam
lingkungan jaringan client-server dan sebagai perpustakaan yang dapat
disematkan (atau ditautkan) ke dalam aplikasi yang terpisah.
MySQL beroperasi bersama dengan beberapa program utilitas yang
mendukung administrasi database MySQL. Perintah dikirim ke
MySQLServer melalui MySQL client yang diinstal pada komputer.

2.5.1 Kelebihan MySQL

1. Mendukung Integrasi Dengan Bahasa Pemrograman Lain.

2. Tidak Membutuhkan RAM Besar.

3. Mendukung Multi User.

4. Bersifat Open Source.

5. Struktur Tabel yang Fleksibel.

6. Tipe Data yang Bervariasi.

7. Keamanan yang Terjamin.

2.5.2 Kekurangan MySQL

1. Kurang Cocok untuk Aplikasi Game dan Mobile

2. Sulit Mengelola Database yang Besar dan Technical Support yang Kurang
 10

2.5.3 Contoh Penggunaan MySQL

Contoh Membuat tabel transaksi dalam MySQL dapat mengunakan

sintak CREATE TABLE nama_tabel (nama_variabel
tipe_data(panjang_data), …….).

Gambar 2.6 Contoh Penggunaan MySQL

Kode Program Create Table Transaksi merupakan sintak yang dapat

digunkan untuk melakukan pembuatan tabel dengan nama Transaksi
berserta atributnya.

Gambar 2.7 Create Table Transaksi

 
Gambar Create Table Transaksi Setelah Dijalankan merupakan tampilan
ketika kode program Create Table Transaksi sudah berhasil dijalankan di
MySQL.
 11

2.6 Adobe Dreamweaver

Menurut Mandar (2017:1) “Adobe Dreamweaver merupakan aplikasi

pengembang yang berfungsi untuk mendesain web yang dibuat,
dikembangkan, dan diproduksi oleh Adobe System”.
Adobe Dreamweaver adalah aplikasi desain dan pengembangan web
yang menyediakan editor WYSIWYG visual (bahasa sehari-hari yang
disebut sebagai Design view) dan kode editor dengan fitur standar seperti
syntax highlighting, code completion, dan code collapsing serta fitur lebih
canggih seperti real-time syntax checking dan code introspection untuk
menghasilkan petunjuk kode untuk membantu pengguna dalam menulis
kode. Tata letak tampilan Design memfasilitasi desain cepat dan
pembuatan kode seperti memungkinkan pengguna dengan cepat membuat
tata letak dan manipulasi elemen HTML.
Dreamweaver memiliki fitur browser yang terintegrasi untuk melihat
halaman web yang dikembangkan di jendela pratinjau program sendiri
agar konten memungkinkan untuk terbuka di web browser yang telah
terinstall. Aplikasi ini menyediakan transfer dan fitur sinkronisasi,
kemampuan untuk mencari dan mengganti baris teks atau kode untuk
mencari kata atau kalimat biasa di seluruh situs, dan templating feature
yang memungkinkan untuk berbagi satu sumber kode atau memperbarui
tata letak di seluruh situs tanpa server side includes atau scripting.
Behavior Panel juga memungkinkan penggunaan JavaScript dasar tanpa
pengetahuan coding, dan integrasi dengan Adobe Spry Ajax framework
menawarkan akses mudah ke konten yang dibuat secara dinamis dan
interface.
Dreamweaver dapat menggunakan ekstensi dari pihak ketiga untuk
memperpanjang fungsionalitas inti dari aplikasi, yang setiap pengembang
web bisa menulis (sebagian besar dalam HTML dan JavaScript).
Dreamweaver didukung oleh komunitas besar pengembang ekstensi yang
membuat ekstensi yang tersedia (baik komersial maupun yang gratis)
 12

untuk pengembangan web dari efek rollover sederhana sampai full-

featured shopping cart.
Dreamweaver, seperti editor HTML lainnya, edit file secara lokal
kemudian diupload ke web server remote menggunakan FTP, SFTP, atau
WebDAV. Dreamweaver CS4 sekarang mendukung sistem kontrol versi
Subversion (SVN).

2.6.1 Kelebihan Adobe Dreamweaver

1. Dengan Adobe Dreamweaver, manajemen website dapat dilakukan

dengan lebih mudah. Anda dapat beralih dengan bebas dalam banyak situs
sedang dikerjakan. Fitur ini adalah suatu keharusan bagi mereka yang
biasa menangani beberapa proyek sekaligus.
2.Perangkat lunak ini dilengkapi dengan fitur yang memungkinkan
Anda meng-upload situs melalui built-in FTP. 3.Adobe Dreamweaver
dikenal dengan fitur CSS yang sangat baik. Ini hanyalah salah satu dari
banyak keuntungan program ini, karena dapat menyederhanakan proses
pengkodean. Dengan titik intuitif dan klik jendela CSS, Anda dapat
menambahkan gaya CSS ke situs dengan mudah.
4.Keunggulan Menggunakan Adobe Dreamweaver selanjutnya adalah
Program ini dilengkapi dengan berbagai tombol rollover.

2.6.2 Kekurangan Adobe Dreamweaver

1. Harga Software yang Cukup Mahal.
2.6.3 Contoh Penggunaan Adobe Dreamweaver
 13

Gambar 2.8 Membuat Tampilan Login pada Adobe Dreamweaver

2.7 XAMPP

Menurut Iqbal (2019:15), “Xampp merupakan sebuah software web

server apache yang didalamnya sudah tersedia database server MySQL
dan support PHP programming”.

XAMPP adalah sebuah paket perangkat lunak (software) komputer

yang sistem penamaannya diambil dari akronim kata Apache, MySQL
(dulu) / MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf
“X” yang terdapat pada awal kata berasal dari istilah cross platform
sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem operasi
berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.

2.7.1 Kelebihan XAMPP

1. Database Storage Engine banyak digunakan oleh para programmer
terutama oleh pengembang web karena gratis. ...
2. Kemampuannya dapat diandalkan, memiliki kapasitas yang cukup sekitar
60.000 tabel dengan jumlah catatan 5.000.000.000 dan bahkan lebih baru.

2.7.2 Kekurangan XAMPP

 14

Tidak cocok untuk menangani data dalam jumlah besar, baik untuk
menyimpan data maupun untuk memproses data.

Memiliki kemampuan kinerja yang terbatas pada server ketika data

yang disimpan telah melebihi kapasitas maksimum kapasitas server karena
tidak menerapkan konsep Technology Cluste
2.7.3 Cara Penggunaan XAMPP

Untuk melakukan instalasi XAMPP, Anda bisa mengikuti langkah

berikut:

1. Download XAMPP melalui website resminya.

2. Lakukan instalasi XAMPP sesuai panduan (wizard) yang ditampilkan dan
pilih Yes untuk melanjutkan instalasi.
3. Pilih komponen yang Anda butuhkan dalam instalasi tersebut. Sebagai
contoh, centang MySQL dan phpMyAdmin.
4. Tentukan direktori instalasi yang tepat, misalnya C:\xampp.
5. Lakukan instalasi Bitnami untuk memudahkan dalam memasang
WordPress, Drupal atau Joomla secara otomatis.

a. Cara Menggunakan XAMPP

Untuk menjalankan XAMPP, pertama buka aplikasi XAMPP yang

telah Anda install. Lalu klik Start pada module Apache dan MySQL.
 15

Gambar 2.9 XAMPP

Setelah keduanya berjalan tanpa error, silahkan akses localhost

menggunakan link berikut:

http://localhost

Atau

127.0.0.1

Maka Anda akan diarahkan ke halaman dashboard XAMPP, seperti

pada gambar di bawah ini.
 16

Gambar 2.10 Dashboard XAMPP

Langkah-langkah diatas adalah dasar menggunakan XAMPP

2.8 phpMyAdmin

Menurut Abdulloh (2016:6),”Phpmyadmin merupakan aplikasi

berbasis web yang digunakan untuk membuat database MySQL, sebagai
tempat untuk menyipan data-data website, keduanya biasanya sudah
disediakan dalam satu paket aplikasi seperti Appserv atau Xampp”

phpMyAdmin adalah aplikasi berbasis web yang digunakan untuk

melakukan pengelolaan database MySQL dan atau tool yang paling
populer untuk mengelola database MySQL. Jadi tidak ada salahnya untuk
belajar phpMyAdmin, karena aplikasi ini sedikit banyak akan dapat
digunakan dalam pengembangan situs web, misalnya WordPress. Di
beberapa template WordPress terkadang juga memerlukan akses ke
database. Kita dapat menggunakan panduan belajar phpMyAdmin ini
untuk melakukan eksport dan import database yang dibuat dengan
MySQL. Dukungan pada semua sistem operasi juga menjadi poin positif
yang dimiliki oleh phpMyAdmin.
 17

Kelebihan dari phpMyAdmin yaitu bisa Menambah, menghapus,

menyalin, serta memperbaharui database , tabel, view, fields, serta index.
Melakukan pemeliharaan database dengan mudah melalui menu
konfigurasi. Melakukan eksekusi, edit serta menyimpan perintah mySQL,
termasuk melakukan eksekusi banyak query sekaligus.

Kekurangan dari phpMyAdmin yaitu hanya dapat diimplementasikan

pada 1 unit server, jika terdapat tambahan server phpmyadmin hanya pasif
saja/standby (tidak memiliki kemampuan atau teknologi cluster server
seperti DBMS Oracle). Selain itu. Hanya bisa berjalan pada satu sistem
operasi yaitu microsoft windows.
2.8.1 Kelebihan phpMyAdmin
1. Memiliki antarmuka grafis berbasis web sehingga bisa diakses secara luas.
2. Mendukung banyak fitur MySQL.
3. Bisa import data dari SQL dan CSV.
4. Menyediakan eksport data dalam berbagai format seperti SQl, XLS, CSV,
XML, PDF dan Text.

2.8.2 Kekurangan phpMyAdmin

1. phpadmin hanya dapat diimplementasikan pada 1 unit server, jika terdapat

tambahan server phpmyadmin hanya pasif saja/standby (tidak memiliki
kemampuan atau teknologi cluster server seperti DBMS Oracle) dan hanya
bisa berjalan pada satu sistem operasi yaitu microsoft windows.

2.8.3 Contoh Penggunaan phpMyAdmin

 18

Gambar 2.11 Contoh Database pada phpMyAdmin

2.9 Flowchart
Menurut Wibawanto (2017:20) “Flowchart adalah suatu bagan
dengan simbol-simbol tertentu yang menggambarkan urutan proses secara
mendetail dan hubungan antara suatu proses (intruksi) dengan proses
lainnya dalam suatu program”.

2.9.1 Kelebihan Flowchart

Menurut Arief S, dkk 2006 : 28-29, kelebihan media flowchart adalah:

menarik perhatian, memperjelas sajian ide, mengilustrasikan atau
menghiasi fakta yang mungkin akan cepat dilupakan atau diabaikan
apabila tidak digrafiskan. Selain kelebihan di atas dijelaskan pula bahwa
media flowchart sangat sederhana, mudah pembuatannya, dan relative
murah dalam pembuatannya.

Deni Darmawan 2012: 64 menjelaskan bahwa media flowchart adalah

media yang mempermudah pemahaman individu akan jalur proses
pengerjaan sesuatu sehingga dapat diikuti secara menyeluruh dan
bermakna.
 19

2.9.2 Kekurangan flowchart

Kekurangannya adalah penyajian media gambar terbatas dan sulit

digunakan untuk kelompok besar, untuk mengatasai kekurangan tersebut
maka pada saat proses pembelajaran berlangsung siswa secara bergantian
mengamati media flowchart.
2.9.3 Contoh Penggunaan Flowchart

Flowchart di bawah ini adalah contoh lainnya yang menunjukkan

bagaimana cara menerjemahkan algoritma menjadi flowchart. Berikut
flowchart untuk menghitung luas lingkaran dengan rumus L = πr2:
Flowchart:

Gambar 2.12 Flowchart untuk menghitung luas lingkaran

 1

IIII. BAB III

METODE PERANCANGAN

3.1 Flowchart

Diagram alir ini digunakan untuk memudahkan penulis dalam membaca alur
pembuatan program.

Gambar 3.1 Flowchart

 2

3.2 Rancangan Database pada phpMyAdmin

3.2.1 Rancangan Tabel

Tabel 3.1 Rancangan Tabel

Nama Tabel Field Data Indeks Keterangan

Name Type
Tabel Siswa Id_siswa Integer Primary_key Berisikan informasi
nama Varchar
data peserta /
alamat Varchar
jurusan Varchar mahasiswa
Tabel Nilai Id_peserta Integer Primary_key Berisikan informasi
nama Varchar
Point data hasil penampilan
lagu Varchar
point Varchar peserta/mahasiswa
Tabel User id Integer Primary_key Menyimpan
nama Varchar informasi data user
user Varchar
untuk mengakses
pass Varchar
login website

3.2.2 Relationship Database

Gambar 3.2 Relatinship Database

3.2.3 Database Kampusku

 3

Ini adalah database Kampusku yang terdiri dari 3 tabel, yaitu : tabel siswa,
tabel user, dan tabel nilai point.

Gambar 3.3 Database Kampusku

3.2.4 Tabel Nilai Point

Tabel ini terdiri dari id_peserta, nama, Lagu, dan point.

Gambar 3.4 Tabel Nilai Point

3.2.5 Tabel Siswa
Tabel ini terdiri dari id_siswa, nama, alamat, dan jurusan.
 4

Gambar 3.5 Tabel Siswa

3.2.6 Tabel User

Terdiri dari id, nama, username, dan password.

3.6 Tabel User

3.3 Rancangan Desain dan Program

3.3.1 Rancangan Login

a. Rancangan Desain Login

Gambar 3.7 Rancangan Desain Login

 5

b. Rancangan Program Login

Gambar 3.8 Rancangan Program Login

3.3.2 Rancangan Tampilan Utama

a. Rancangan Desain Tampilan Utama

Gambar 3.9 Rancangan Desain Tampilan Utama

 6

b. Rancangan Program Tampilan Utama

Gambar 3.10 Rancangan Program Tampilan Utama

3.3.3 Rancangan Data Mahasiswa/Peserta

a. Rancangan Desain Data Mahasiswa/Peserta

Gambar 3.11 Rancangan Desain Data Mahasiswa

 7

b. Rancangan Program Data Mahasiswa/Peserta

Gambar 3.12 Rancangan Program Data Mahasiswa

3.3.4 Rancangan Input Data Mahasiswa/Peserta

a. Rancangan Desain Input Data Mahasiswa/Peserta

Gambar 3.13 Rancangan Desain Input Data Mahasiswa/Peserta

 8

b. Rancangan Program Input Data Mahasiswa/Peserta

Gambar 3.14 Rancangan Program Input Data Mahasiswa/Peserta

3.3.5 Rancangan Update Data Mahasiswa/Peserta

a. Rancangan Desain Update Data Mahasiswa/Peserta

 9

Gambar 3.15 Rancangan Desain Update Data Mahasiswa/Peserta

b. Rancangan Program Update Data Mahasiswa/Peserta

Gambar 3.16 Rancangan Program Update Data Mahasiswa/Peserta

3.3.6 Rancangan Delete Data Mahasiswa/Peserta

a. Rancangan Desain Delete Data Mahasiswa/Peserta

 10

Gambar 3.17 Rancangan Desain Delete Data Mahasiswa/Peserta

b. Rancangan Program Delete Data Mahasiswa/Peserta

Gambar 3.18 Rancangan Program Delete Data Mahasiswa/Peserta

3.3.7 Rancangan Data Hasil Penampilan Peserta

a. Rancangan Program Data Hasil Penampilan Peserta

Gambar 3.19 Rancangan Desain Data Hasil Penampilan

b. Rancangan Desain Data Hasil Penampilan Peserta

 11

Gambar 3.20 Rancangan Program Data Hasil Penampilan Peserta

3.3.8 Rancangan Input Data Hasil Penampilan

a. Rancangan Desain Input Data Hasil Penampilan Peserta

Gambar 3.21 Rancangan Desain Input Data Hasil Penampilan Peserta

b. Rancangan Program Input Data Hasil Penampilan Peserta

 12

Gambar 3.22 Rancangan Program Input Data Hasil Penampilan Peserta

3.3.9 Rancangan Update Data Hasil Penampilan Peserta

a. Rancangan Desain Update Data Hasil Penampilan Peserta

Gambar 3.23 Rancangan Desain Update Data Hasil Penampilan Peserta

 13

b. Rancangan Program Update Data Hasil Penampilan Peserta

Gambar 3.24 Rancangan Program Update Hasil Penampilan Peserta

3.3.10 Rancangan Delete Data Hasil Penampilan Peserta

a. Rancangan Desain Delete Data Hasil Penampilan Peserta

Gambar 3.25 Rancangan Desain Delete Data Hasil Penampilan Peserta

 14

b. Rancangan Program Delete Data Hasil Penampilan Peserta

Gambar 3.26 Rancangan Program Delete Data Hasil Penampilan Peserta

3.3.11 Rancangan Data Pemenang

a. Rancangan Desain Data Pemenang

Gambar 3.27 Rancangan Desain Data Pemenang

b. Rancangan Program Data Pemenang

 15

Gambar 3.28 Rancangan Program Data Pemenang

3.3.12 Rancangan Video Penampilan

a. Rancangan Desain Video Penampilan

 16

Gambar 3.29 Rancangan Desain Video Penampilan

b. Rancangan Program Video Penampilan

 17

Gambar 3.30 Rancangan Program Video Penampilan

3.3.13 Rancangan Logout

a. Rancangan Desain Logout

Gambar 3.31 Rancangan Desain Logout

 18

b. Rancangan Program Logout

Gambar 3.32 Rancangan Program Logout

 1

IVI. BAB IV
HASIL DAN PEMBAHASAN

4.1 Program Berbasis Web

a. Ketikkan link program pada browser. Lalu Enter.

Gambar 4.1 Link Program Pada Browser

b. Setelahnya, akan muncul halaman login. Isi Username dengan “admin”

dan Password dengan “12345”.

Gambar 4.2 Tampilan Login

c. Jika berhasil login, ,akan akan menuju halaman selanjutnya, yaitu halaman
utama. Kita bisa melihat daftar peserta, melihat data pemenang,
 2

menambah peserta, melihat hasil perlombaan, dan melihat video

penampilan peserta.

Gambar 4.3 Tampilan Utama

d. Kita bisa menginputkan data peserta dengan cara mengisi id_siswa, nama,
alamat, dan jurusan. Sehingga nantinya akan diproses dan kita bisa melihat
hasilnya pada tampilan data peserta/mahasiswa.
 3

Gambar 4.4 Input Data Mahasiswa

e. Ini adalah hasil proses penginputan data pada tampilan input data
mahasiswa/peserta. Kita bisa melihat data peserta yang mengikuti
perlombaan menyanyi dikampus tersebut.

Gambar 4.5 Tampilan Data Peserta

 4

f. Kita bisa mengupdate atau mengedit data peserta pada tampilan data
mahasiswa/peserta dengan mengklik “ Edit “ lalu kita sesuaikan data yang
ingin kita ubah.

Gambar 4.6 Tampilan Utama Update Data Mahasiswa

g. Pada tampilan ini, kita bisa melihat data peserta yang memenangkan
perlombaan menyanyi tersebut.
 5

Gambar 4.7 Tampilan Data Pemenang

h. Pada tampilan ini kita bisa melihat data hasil penampilan para peserta.
Kita bisa mengetahui lagu yang dinyanyikan dan berapa nilai yang
didapatkan para peserta.

Gambar 4.8 Tampilan Data Hasil Penampilan Peserta

i. Kita bisa mengubah atau mengedit data hasil pernampilan peserta. dengan
cara klik “Edit” , kita bisa ubah data hasil penampilan peserta sesuai
dengan kebutuhan kita.
 6

Gambar 4.9 Tampilan Udate data Hasil Penampilan Peserta

j. Tampilan ini berisi video-video para peserta saat menyanyikan lagu pada
perlombaan tersebut.

Gambar 4.10 Tampilan Video Penampilan

k. Ini adalah tampilan saat kita “ logout “ dari aplikasi campussinger.

 7

Gambar 4.11 Tampilan Logout

4.2 Pembahasan Program

Program telah dibuat dan ditampilkan secara online, serta dapat di
akses pada link https://alobayu280600.000webhostapp.com/.
Program ini dirancang dengan menggunakan bahasa pemrograman
PHP, sehingga penulis dapat menghasilkan sebuah program yang
menampilkan tampilan input berupa form tabel tambah, edit, dan hapus
yang bisa diisi oleh pengguna, untuk kemudian ditampilkan dalam sebuah
output yang berupa tabel dan informasi dari data tersebut.
 1

VI. BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan
Setelah melihat uraian pada bab-bab sebelumnya serta memperhatikan dari
Program “Aplikasi Campusinger Berbasis Web”, maka dapat diambil kesimpulan
sebagai berikut :
1. Aplikasi Campussinger berbasis web ini dirancang agar memudahkan
peserta yang ingin mengikuti perlombaan menyanyi di kampus. Dengan
adanya aplikasi ini , bisa memudahkan para peserta untuk mendaftarkan diri
jika akan mengikuti perlombaan menyanyi tersebut. Kita juga bisa melihat
video penampilan peserta dan mengetahui siapa saja yang menjadi juara pada
perlombaan.
2. Aplikasi dapat dibuka dengan program browser/google chrome dengan
Link https://alobayu280600.000webhostapp.com/

5.2 Saran
Pada bagian akhir dari penyusunan laporan ini, penulis menyadari segala
kekurangan dan keterbatasan yang dimiliki dalam penulisan laporan ini, maka dari
itu saran-saran yang dapat dikemukakan adalah sebagai berikut:
1. Program dan laporan yang telah dikerjakan ini hendaknya dan berharap
adanya pengembangan yang signifikan.
2. Diharapkan dari program aplikasi dapat dapat dikembangkan dengan lebih
baik lagi.
3. Dalam penulisan kode-kode untuk merancang program diperlukan
ketelitian agar tidak terjadi kesalahan.
Demikian saran yang dapat disampaikan dalam laporan ini, semoga
bermanfaat bagi peneliti-peneliti berikutnya dan dapat dikembangkan menjadi
lebih kompleks.
 2

DAFTAR PUSTAKA

Priyanto Hidayatullah, Jauhari Khairul Kawistara (2017), “Pemrograman

WEB Edisi Revisi”, Penerbit Informatika , Bandung.

Ramadhan, R. F., & Mukhaiyar, R. (2020). Penggunaan Database MySQL

dengan Interface PhpMyAdmin sebagai Pengontrolan Smarthome Berbasis
Raspberry Pi. JTEIN: Jurnal Teknik Elektro Indonesia, 1(2), 129-134.

Endra, R. Y., & Aprilita, D. S. (2018). E-Report Berbasis Web Menggunakan

Metode Model View Controller Untuk Mengetahui Peningkatan Perkembangan
Prestasi Anak Didik. Explore: Jurnal Sistem informasi dan telematika
(Telekomunikasi, Multimedia dan Informatika), 9(1).

Hesananda, R., Warnars, H. L. H. S., & Sianipar, N. F. (2017). Supervised

Classification Karakter Morfologi Tanaman Keladi Tikus (Typhonium
Flagelliforme) Menggunakan Database Management System. Jurnal Sistem
Komputer, 7(2), 50-58.

Wahyudi, T. (2017). Rancang Bangun Sistem Informasi Pondok Pesantren

(Studi Kasus Darul Abror Watumas). Simnasiptek 2017, 1(1), 23-30.

Samsudin, Muhammad, Muhdar Abdurahman, and Muksin Hi Abdullah.

"Sistem informasi pengkreditan nasabah pada koperasi simpan pinjam sejahtera
baru Kota Ternate berbasis web." Jurnal Ilmiah ILKOMINFO-Ilmu Komputer &
Informatika 2.1 (2019).

Anna, Anna, and Riska Arissusandi. "Rancang Bangun Sistem Informasi

Akuntansi Laporan Laba Rugi Berbasis Web Pada PT. United Tractors
Pontianak." EVOLUSI: Jurnal Sains dan Manajemen 7.2 (2019).
 3

Nurhadi, Acmad. "Penerapan Metode Waterfall Dalam Sistem Informasi

Penyedia Asisten Rumah Tangga Secara Online." Jurnal Khatulistiwa
Informatika 6.2 (2018).

Kurniyawan, Gusti. APLIKASI PENGOLAHAN DATA SERVIS KENDARAAN

MOBIL DAN MOTOR PADA PT. PENERBIT ERLANGGA CABANG
PALEMBANG BERBASIS WEBSITE. Diss. POLITEKNIK NEGERI
SRIWIJAYA, 2019.

Fajriansyah, A. (2019). Sistem Informasi Geografis Pengguna Narkoba Pada

Badan Narkotika Nasional Kabupaten Ogan Ilir Berbasis Website (Doctoral
dissertation, POLITEKNIK NEGERI SRIWIJAYA).

Kurniawan, A. (2021). Rancang Bangun Company Profile Berbasis Web

Pada RS. Mutiara Bunda Lampung (Doctoral dissertation, STMIK Palcomtech).

Nirsal, N., Rusmala, R., & Syafriadi, S. (2020). Desain Dan Implementasi
Sistem Pembelajaran Berbasis E-Learning Pada Sekolah Menengah Pertama
Negeri 1 Pakue Tengah. d'ComPutarE: Jurnal Ilmiah Information
Technology, 10(1), 30-37