Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web

(1)

DAFTAR PUSTAKA

Juansyah.2013. Pengertian Sistem Informasi. 31 Maret 2013. From

Kadir, Abdul. 2002. Pemrograman Web Mencakup: HTML, CSS, JavaScript dan

PHP. Yogyakarta. Andi.

Kadir, Abdul. 2002. Penuntun Praktis Belajar SQL. Yogyakarta. Andi.

Kusnadi, Engkus. 2013. Pengertian dan Fungsi HTML. 20 November 2013. From

Nia, Imania. 2013. Pengertian, Definisi dan Fungsi Dari CSS. 08 Oktober 2013. From

P, Rangga. 2014. Struktur Dasar HTML. 28 Mei 2014. From

Raghib, Nuruddin.2013. Pengertian/definisi Web.18 Januari 2013. From

Rahman, Taufiq. 2014. Pengertian dari PHP. 19 September 2014. From


(2)

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Dalam membangun sebuah program aplikasi dimana tujuan dari aplikasi tersebut adalah untuk membantu dan menunjang kerja user dalam menggunakan komputer agar lebih efisien dan efektif. Sehingga apa yang selama ini dikerjakan secara konvensional menjadi lebih modern dengan adanya teknologi dan informasi.

Maka untuk memulai membangun website untuk UKM Tenis Meja USU ini, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang menggunakan website UKM yang akan dibuat inis.

3.2 Perancangan Sistem

Berikut merupakan beberapa alat bantu yang digunakan dalam pembuatan Website UKM Tenis Meja USU.


(3)

3.2.1 Desain Sistem

1. Diagram Context

Context Diagram (CD) pada Website UKM Tenis Meja USU ini adalah sebagai berikut:

Info Peringkat Anggota

Login Sebagai Member Input data peringkat

Website UKM Tenis Meja USU

Visitor Admin

Info Visi Misi UKM Info Sejarah UKM

Info Kegiatan UKM Info Prestasi UKM

Laporan Data iuran Upload Data

Input data iuran

Ketentuan Anggota Aturan Pertandingan Sanksi-Sanksi Data Anggota aktif

Laporan Data Peringkat

Laporan Data Member


(4)

Data Flow Diagram (DFD) merupakan pengembangan dari ConVarchar Diagram (yang terdiri dari DFD Level 1 pada Aplikasi Pengisian Sistem Raport Siswa.


(5)

3.2.2 Desain Basis Data (Database)

Basis Data (Database) adalah kumpulan dari data yang berhubungan antara satu dengan yang lainnya, tersimpan di perangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem komputerisasi,karena merupakan basis data dalam menyediakan informasi bagi para pengguna.

Adapun desain basis data (Database) adalah sebagai berikut 1. Entity Relationship Diagram (ERD)


(6)

Dalam sistem ini memerlukan 28 tabel:

1. Tabel Admin

Nama Tabel : admin

Fungsi : Untuk menginput data admin

Tabel 3.1 Tabel Admin

Nama Field Tipe Data Ukuran

Kode _admin Varchar 15

Nama_admin Varchar 50

No_tlp Varchar 20

Password Varchar 32

2. Tabel Data Peringkat

Nama Tabel : Data_peringkat

Fungsi : Untuk menginput data siswa Tabel 3.2 Tabel Data Peringkat

Nama Field Tipe Data Ukuran

No_id Varchar 19

Nama Varchar 100

Skor_Menang Int 15

Fakultas Varchar 30


(7)

3. Tabel Data_Iuran

Nama Tabel : Data_iuran

Fungsi : Untuk menginput data iuran

Tabel 3.3 Tabel Data Iuran

Nama Field Tipe Data Ukuran

No_id Varchar 15

Nama Varchar 50

Januari Varchar 20

Februari Varchar 20

Maret Varchar 20

April Varchar 20

Mei Varchar 20

Juni Varchar 20

Juli Varchar 20

Agustus Varchar 20

September Varchar 20

Oktober Varchar 20

November Varchar 20


(8)

Nama Tabel : member

Fungsi : Untuk menginput daftar member

Tabel 3.4 Tabel Data Member

Nama Field Tipe Data Ukuran

No_id Varchar 11

Nama Varchar 100

Password Varchar 50

Tempat_lahir Varchar 50

Tanggal_lahir Date

Alamat Varchar 100

Jenis_kelamin Enum

Fakultas Varchar 30

Jurusan Varchar 30


(9)

5. Tabel Download

Nama Tabel : download

Fungsi : Untuk menginput data download

Tabel 3.5 Tabel Download

Nama Field Tipe Data Ukuran

Id Int 11

Tanggal_upload Date

Nama_file Varchar 100

Tipe_file Varchar 10

Ukuran_file Varchar 20


(10)

Berikut flowchart dari sistem yang di kerjakan oleh website ini adalah sebagai berikut:

1. Halaman Utama 2. Login Admin 3. Login Member 4. Menu Admin 5. Menu Member

3.2.3.1 Flowchart Sistem Halaman Utama


(11)

3.2.3.2 Flowchart Sistem


(12)

Gambar 3.6 Flochart Halaman Login Member


(13)

Gambar 3.7 Flochart Halaman Menu Admin


(14)

(15)

3.3 Desain Visitor Area

3.3.1 Desain Halaman Utama

Halaman utama merupakan tampilan dari halaman utama dari sistem informasi dari website UKM Tenis Meja USU, dimana pada halaman ini terdapat menu home, about, sejarah, visi misi, prestasi, kegiatan, peringkat dan member.

Header

Home

About

Peringkat

Member

Gambar


(16)

3.3.2 Desain Halaman About

Halaman ini merupakan tampilan dari menu about yang berisi tentang informasi UKM Tenis Meja USU.

Gambar 3.5 Tampilan Form Data Siswa

Gambar 3.10 Tampilan Halaman About

Header

Home

About

Peringkat

Member

Text


(17)

3.3.3 Desain Halaman Sejarah

Halaman ini merupakan menu sejarah dari website UKM Tenis Meja USU, dimana pada halaman sejarah ini terdapat informasi sejarah berdirinya UKM Tenis Meja USU.

Header

Home

About

Peringkat

Member

Text


(18)

Halaman inin merupakan menu visi misi dari website UKM Tenis Meja USU, dimana pada halaman ini terdapat informasi visi misi dari UKM Tenis Meja USU secara lengkap.

Gambar 3.12 Tampilan Halaman Visi Misi

Header

Home

About

Peringkat

Member

Text


(19)

3.3.5 Desain Halaman Prestasi

Halaman ini merupakan halaman prestasi pada website UKM Tenis Meja USU, pada halaman ini terdapat informasi dari UKM yang isi didalam halaman ini tentang apa saja prestasi - prestasi yang telah mereka dapatkan.

Gambar 3.13 Tampilan Halaman Prestasi

Header

Home

About

Peringkat

Member

Text


(20)

Gambar 3.14 Tampilan Halaman Kegiatan

3.3.7 Desain Halaman Peringkat

Halaman ini merupakan halaman peringkat dari website UKM Tenis Meja USU, pada menu ini terdapat informasi mengenai peringkat anggota terupdate setiap bulannya dalam organisasi UKM Tenis Meja USU ini.

Header

Home

About

Peringkat

Member

Text


(21)

3.3.8 Desain Halaman Member 3.3.8 Desain Halaman Menu Member

Gambar 3.15 Tampilan Halaman Peringkat

3.3.8 Desain Halaman Registrasi Member

Header

Home

About

Peringkat

Member

Text


(22)

registrasi untuk visitor yang mau menjadi member dan ada menu login untuk setelah registrasi.

Gambar 3.16 Tampilan Halaman Registrasi Member

Header

Home

About

Peringkat

Member

Footer

REGISTRASI No_id Nama Password Tempat Lahir Tanggal Lahir Alamat Jenis Kelamin

username

password

Login


(23)

3.3.9 Desain Halaman Utama Member

Halaman ini merupakan halaman utama dari halaman member dalam website ukm Tenis Meja USU. Di halaman Member ini terdapat menu ketentuan anggota baru, aturan pertandingan, sanksi-sanksi, daftar anggota aktif,download file, dan data iuran.

Gambar 3.7 Tampilan Form Menu Input data Ekstrakurikuller

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(24)

Halaman menu anggota baru ini terdapat informasi Syarat menjadi anggota dan sekertariatan UKM Tenis Meja USU.

Gambar 3.18 Tampilan Halaman Menu Angota Baru Member

3.3.11 Desain Halaman Aturan Pertandingan

Halaman aturan pertandingan ini terdapat informasi peraturan pertandingan resmi secara lengkap.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(25)

Gambar 3.19 Tampilan Halaman Aturan Pertandingan Member

3.3.12 Desain Halaman Sanksi – sanksi

Halaman sanksi - sanksi ini berisi sanksi – sanksi bagi anggota yang tidak aktif dan melangkar peraturan.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(26)

Gambar 3.20 Tampilan Halaman Menu Sanksi - sanksi Member

3.3.13 Desain Halaman Daftar Anggota Aktif

Halaman daftar anggota aktif ini terdapat informasi daftar siapa saja yang aktif pada organisasi UKM Tenis Meja USU ini secara lengkapinformasi pendataannya.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(27)

v

Gambar 3.21 Tampilan Halaman Menu Daftar Anggota Aktif Member

3.3.14 Desain Halaman Download File

Halaman downolad file ini terdapat file yang telah di berikan kepada admin untuk member dalam bentuk doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .rar, .zip dan besar file (file size) maksimal hanya 2 MB, dan bisa di download oleh member.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif

Datar Anggota Coloum Coloum Coloum Coloum Coloum Coloum


(28)

Gambar 3.22 Tampilan Halaman Download File Member

3.3.15 Desain Halaman Data Iuran

Halaman data iuran ini terdapat informasi mengenai data iuran angota UKM Tenis Meja USU secara update dan lengkap,

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Dowload File

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(29)

Gambar 3.23 Tampilan Halaman Data Iuran Member

3.3.16 Desain Halaman Logout

Halaman logout ini halaman untuk keluar dari halaman member.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Data Iuran Anggota

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(30)

3.3.17 Desain Halaman Utama Admin

Halaman utama admin ini berisi informasi siapa saja pengurus periode ini dan dalam halaman admin terdapat menu input data iuran, upload data anggota, input data peringkat, lihat data anggota, lihat data iuran, lihat data peringkat, profil admin, edit profil admin, dan ganti password admin.

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru Aturan Pertandingan Sanksi - sanksi Datar Anggota Aktif


(31)

3.3.18 Desain Halaman Input Data Iuran

3.3.7 Desain Halaman Data Iuran

3.3.18 Desain Halaman Input Data Iuran

Halaman input data iuran merupakan halaman untuk menginput data iuran anggota secara rutin, dan yang menginput adalah admin.

Header

Home

Input Data

Lihat Data

Akun

Text

Footer


(32)

3.3.19 Desain Halaman Upload Data Anggota

Halaman upload data anggota ini berguna untuk mengapload file penting untuk member dan bisa di dowload oleh member.

Header

Home

Input Data

Lihat Data

Akun

Input Data Iuran Anggota

Footer


(33)

3.3.20 Desain Halaman Input Peringkat Anggota

Halaman input peringkat anggota ini berguna untuk menginput peringkat anggota UKM Tenis Mja USU secara update perbulannya.

Header

Home

Input Data

Lihat Data

Akun

Footer

Logout

Nama File

Pilih File

Upload

Browse


(34)

3.3.21 Desain Halaman Lihat Data Anggota

Halaman ini merupakan halaman yang di gunakan admin untuk mengedit data anggota yang salah dan menghapus data anggota yang sudah tidak aktif.

Header

Home

Input Data

Lihat Data

Akun

Footer

Logout

No id Nama

Pilih No Id

Skor Menang

Email Fakultas

Pilih Nama

Pilih Fakultas Pilih Alamat Email


(35)

3.3.22 Desain Halaman Lihat Data Iuran

Halaman ini merupakan halaman yang di gunakan admin untuk mengedit data iuran dan menghapus data iuran anggota yang usdah tidak aktif.

Header

Home

Input Data

Lihat Data

Akun

Data Anggota

Footer

Logout

coloum

coloum

coloum

coloum

coloum

coloum


(36)

3.3.23 Desain Halaman Lihat Data Peringkat

Halaman ini merupakan halaman yang di gunakan admin untuk mengedit data peringkat anggota UKM Tenis Meja USU dan menghapus data peringkat anggota yang sudah tidak aktif.

Header

Home

Input Data

Lihat Data

Akun

Data Anggota

Footer

Logout

coloum

coloum

coloum

coloum

coloum

coloum


(37)

3.3.24 Desain Halaman Profil Admin

Halaman ini merupakan halaman profil admin dari website UKM Tenis Meja USU. Admin adalah seseorang yang mengatur website UKM Tenis Meja USU ini dan admin adalah penanggung jawab sepenuhnya pada website ini.

Header

Home

Input Data

Lihat Data

Akun

Data Anggota

Footer

Logout

coloum

coloum

coloum

coloum

coloum

coloum


(38)

3.3.25 Desain Halaman Edit Profil Admin

Halaman ini meupakan halaman yang berguna untuk digunakan untuk mengedit profil admin dari UKM Tenis Meja USU.

Header

Home

Input Data

Lihat

Akun

Text

Footer

Logout

Header

Home

Input Data

Lihat

Akun

Text

Footer


(39)

3.3.26 Desain Halaman Ganti Password Admin

Halaman ini merupakan halaman untuk admin mengganti password halaman admin.

Header

Home

Input Data

Lihat Data

Akun

Text

Footer


(40)

IMPLEMENTASI DAN PEMBAHASAN

4.1 Implementasi Sistem

Ini merupakan tahap terakhir dari pengembangan sistem. Tahap ini merupakan tahap dimana meletakkan sistem agar dapat dijalankan atau di operasikan. Dalam hal ini, web UKM Tenis Meja USU tersebut harus sesuai dengan komponen – komponen pokok pada sistem komputer yang akan kita gunakan. Tahap ini merupakan tahap inti dalam membangun sebuah proyek. Implementasi merupakan langkah yang digunakan untuk mengoperasikan web UKM Tenis Meja USU yang telah dibuat. Dalam bab ini akan dijelaskan mengenai cara penggunan dari sistem informasi UKM Tenis Meja USU berbasis web.

4.2 Halaman Sistem Informasi UKM Tenis Meja USU Berbasis Web

Pada program web UKM Tenis Meja USU ini memiliki beberapa halaman. Setiap halaman tersebut terhubung satu sama lain yang menunjuk setiap halaman yang berbeda. Berikut adalah halaman -halaman yang terdapat dalam web UKM Tenis Meja USU berbasi web ini :


(41)

Website ini memiliki 3 area, Ada pun Area tersebut adalah sebagai berikut: 1. Visitor Area

2. Member Area 3. Admin Area

4.2.1 Visitor Area

4.2.1.1 Halaman utama

Halaman utama merupakan beranda dari program sistem informasi UKM Tenis Meja USU ini, dalam halaman ini visitor dapat melihat foto – foto dari aktivitas yang di lakukan oleh Anggota serta kegiatan UKM Tenis Meja USU.


(42)

Pada halaman about, para visitor bisa melihat informasi dari UKM Tenis Meja USU ini. Pada halaman ini bisa menarik visitor untuk bergabung dengan keluarga besar UKM Tenis Meja USU.

Gambar 4.2 Tampilan Halaman About

4.2.1.3 Halaman Sejarah

Pada halaman sejarah visitor dapat melihat sejarah dari UKM Tenis Meja USU, di halaman sejarah terdapat sejarah dari UKM Tenis Meja USU sejak pertama kali di dirikan oleh pengurus pertamanyanya sampai dengan sekarang.


(43)

Gambar 4.3 Tampilan Halaman Sejarah

4.2.1.4 Halaman Visi Misi

Pada halaman visi misi ini, visitor dapat melihat visi misi dari UKM Tenis Meja USU untuk kedepannya dimana visi misi ini untuk memajukan UKM Tenis Meja USU kedepannya agar lebih baik.


(44)

Gambar 4.4 Tampilan Halaman About

4.2.1.5 Halaman Prestasi

Pada halaman prestasi ini,visitor dapat meihat prestasi-prestasi yang telah di capai oleh atlit-atlit UKM Tenis Meja USU, jadi para sponsor tidak ragu untuk

mensponsori para atlit UKM Tenis Meja USU pada saat pertandingan.


(45)

4.2.1.6 Halaman Kegiatan

Dihalaman kegiatan ini visitor dapat melihat kegiatan-kegiatan yang dilakukan oleh anggota UKM Tenis Meja USU, jadi para visitor akan lebih tertarik untuk mengetahui lebih banyak tentang UKM Tenis Meja USU dan mereka akan lebih tertarik mejadi anggota UKM Tenis Meja USU setelah melihat lebih banyak kegiatan yang di lakukan oleh anggota UKM Tenis Meja USU.

Gambar 4.6 Tampilan Halaman Kegiatan


(46)

susah payah untuk datang dan bertanya lagi siapa peringkat-peringkat yang sedang unggul.

Gambar 4.7 Tampilan Halaman Peringkat

4.2.1.8 Halaman Member

Pada halaman member ini, visitor dapat registrasi unuk menjadi anggota resmi UKM Tenis Meja USU. Setelah mendapatkan no_id dan password, mereka resmi menjadi anggota UKM Tenis Meja USU dan mereka dapat masuk ke halaman khusus member.


(47)

Gambar 4.8 Tampilan Halaman Menu Member

4.2.2 Member Area

4.2.2.1 Halaman Utama Member

Halaman ini adalah halaman utama pada saat member login. Pada saat member masuk ke dalam halaman utama member, member akan di jadikan kaliamat “Selamat Datang “NO ID” di Website UKM Tenis Meja.


(48)

Gambar 4.9 Tampilan Halaman Utama Member

4.2.2.2 Halaman Daftar Anggota Aktif member

Pada halaman ini member akan dapat melihat siapa – siapa saja yang sudah menjadi anggota UKM Tenis Meja USU, jadi mereka tau jumla dan siapa – siapa saja yang sudah menjadi anggota


(49)

Gambar 4.10 Tampilan HalamaDaftar Anggota Aktif

4.2.2.3 Halaman Sanksi-sanksi Member

Pada halaman ini member dapat melihat sanksi-sanksi yang akan di berikan apabila tidak aktif dalam kegiatan UKM, adanya halaman ini anggota tidak akan sesuka hati dalam menjadi anggota UKM Tenis Meja USU. Mereka juga akan belajar bertanggung jawab dalam organisasi ini dan mereka akan terbiasa bertanggung jawab untuk mengikuti organisasi lainnya.


(50)

Gambar 4.11 Tampilan Halaman Sanksi-sanksi Member

4.2.2.4 Halaman Aturan Pertandingan Member

Dalam halaman ini,member bisa melihat aturan – aturan selama mengikuti pertandingan. Setelah melihat aturan dalam pertandingan ini mereka akan semakin semangat dan pede dalam mengikuti pertandingan.


(51)

Gambar 4.12 Tampilan Halaman Aturan Pertandingan

4.2.2.5 Halaman Ketentuan Anggota Baru Member

Pada halaman ini member akan mengetahui jadwal untuk anggota latihan dan tempatnya, setelah mengetahui jadwal latihan dan tempat meraka akan tidak bertanya - tanya lagi kapan latihan dan tempat latihannya.


(52)

Gambar 4.13 Tampilan Halaman Ketentuan Anggota Baru Member

4.2.2.6 Halaman Dowload File Member

Pada halaman download file member ini, member dapat mendownload file yang di shear oleh admin, jadi mereka lebih mudah mempelajari file yang telah di berikan oleh admin karna mereka tidak perlu membuka-buka web ini cuma untuk melihat file ini lagi. File yang di berikan oleh admin berbentuk, doc, .docx, .xls, xlsx, ppt, pptx, pdf, .rar, zip dan besar file (file size) maksimal hanya 2 MB .


(53)

Gambar 4.14 Tampilan Halaman Download File Member

4.2.2.7 Halaman Data Iuran Member

Dalam halaman data iuran member ini, member dapat melihat data iuran member untuk keseluruhan anggota, jadi member dapat melihat siapa – siapa yang sudah bayar iuran siapa yang belum bayar.


(54)

Gambar 4.15.1 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota


(55)

4.2.2.8 Halaman Logout

Pada halaman logout ini,member harus klik logout kalau mau keluar karna kalau langsung keluar menekan tombol close member lain tidak bisa masuk karna belum di logout.

Gambar 4.16 Tampilan Halaman Logout

4.2.3 Admin Area


(56)

Gambar 4.17 Tampilan Halaman Home Admin

4.2.3.2 Halaman Input Data Iuran Admin

Pada halamna input data iuran, admin akan menginput data iuran untuk anggota UKM Tenis Meja USU secara update agar member dapat selalu melihat informasi data iuran .


(57)

Gambar 4.18 Tampilan Halaman Input Data Iuran Admin

4.2.3.3 Halaman Upload Data Anggota Admin

Pada halaman ini, admin akan mengupload data – data yang penting untuk anggota UKM Tenis Meja USU agar mereka selalu dapat mengetahui informasi atau jadwal – jadwal pertandingan.


(58)

Gambar 4.19 Tampilan Halaman Upload Data Anggota Admin

4.2.3.4 Halaman Input Data Peringkat Admin

Dalam halaman input data peringkat ini, admin akan selalu menginput data peringkat untuk anggota UKM Tenis Meja USU, jadi member dan visitor akan selalu melihat selalu peringkat perbulan untuk anggota UKM Tenis Meja USU.


(59)

Gambar 4.20 Tampilan Halaman Input Data Anggota Admin

4.2.3.5 Halaman Lihat Data Anggota Admin

Pada halaman ini, admin dapat melihat data anggota dan admin akan melakukan penghapisan data kalau member yang baru saja registrasi tidak sesusai dengan ketentuan anggota, dan admin disini bisa mengedit bila terjadi kesalahan pengetikan pada saat proses registrasi.


(60)

Gambar 4.21 Tampilan Halaman Lihat Data Anggota Admin

4.2.3.6 Halaman Lihat Data Iuran

Pada halaman ini admin akan mengedit atau memperbarui data iuran anggota UKM Tenis Meja dan admin dapat menghapus anggota jika mereka tidak aktif untuk membayar iuran secara rutin.


(61)

Gambar 4.22 Tampilan Halaman Data Iuran

4.2.3.7 Halaman Lihat Data Peringkat

Pada halaman ini, admin akan melakukan pengeditan dan penghapusan pada data peringkat, tujuan untuk pengeditan karna setiap bulannya skor akan selalu bertambah dan data peringkat pasti berbeda setiap bulannya, untuk penghapusannya jika anggota sudah tidak aktif dalam kegiatan liga UKM Tenis Meja USU secara rutin mereka akan di hapus dalam keanggotaan di UKM dan merka tidak menjadi member, otomatis dalam data peringkat mereka akan di hapus oleh admin.


(62)

Gambar 4.23 Tampilan Halaman Lihat Data Peringkat

4.2.3.8 Halaman Profil Admin

Pada halaman profil admin ini, admin bisa melihat profil admin sendiri.


(63)

4.2.3.9 Halaman Edit Profil Admin

Pada halaman ini, admin dapat mengubah nama dan no hp admin secara bebas.

Gambar 4.25 Tampilan Halaman Edit Profil Admin Anggota

4.2.3.9 Halaman Ganti Password Admin

Dalam halaman ini, admin dapat mengubah password yang lama dengan pasword baru sesuai kemauan admin.


(64)

Gambar 4.26 Tampilan Halaman Ganti Password Admin

4.2.3.10 Halaman Logout Admin

Pada halaman ini, admin harus klik logout untuk kluar karna kalau langsung klik close admin tidak bisa login kembali.


(65)

BAB 5

PENUTUP

5.1Kesimpulan

Berdasarkan hasil penjelasan pada bab-bab sebelumnya, penulis dapat mengambil beberapa kesimpulan, yaitu:

1. Aplikasi ini dibuat untuk memudahkan para pengurus dan anggota baru UKM Tenis Meja USU dalam proses menginput data iuran, data peringkat dan menginput data anggota baru.

2. Aplikasi ini dibuat untuk mempermudahkan perusahaan untuk mencari mahasiswa/i yang berprestasi dalam bidang olahraga Tenis Meja karna di halaman visitor di lengkapi form peringkat yang akan mempermudahkan mereka.

3. Kemudahan yang diciptakan programmer dalam meng-input, meng-update, mengedit,dan menghapus data pada sistem ini sehingga data dapat diperbaharui oleh admin.


(66)

yang di share oleh admin ke halaman member.

6. Aplikasi ini juga dilengkapi dengan data iuran, jadi setiap member mengetahui data iuran siapa yang yang sudah bayar iuarannya dengan lunas dan siapa yang belum lunas.

7. Aplikasi ini juga bisa mengedit data yang sudah di perbarui.

8. Aplikasi ini juga bisa menghapus data yang tidah sesuai dengan ketentuan anggota baru atau sudah kadaluarsa, seperti data iuran dan data anggota,


(67)

5.2 Saran

Dari kesimpulan-kesimpulan diatas, maka penyusun mengemukakan saran yaitu :

1. Diharapkan program ini dapat dikembangkan menjadi program dengan menggunakan sistem client server sehingga aplikasi ini dapat digunakan secara lebih baik serta optimal.

2. Diharapkan program ini bisa menambah field untuk seluruh form sehingga bisa lebih fleksibel lagi dalam penggunaannya.

3. Dan pada form absensi, diharapkan program ini bisa mendata ketidakhardiran siswa pada tiap mata pelajaran sehingga proses absensi bisa lebih akurat.


(68)

LANDASAN TEORI

2.1Website

2.1.1 Sejarah Website

Sejarah website dimulai pada tahun 1989 ketika tim Berner-Lee yang bekerja di laboratorium Fisika Partikal Eropa atau yang dikenal dengan CERN (Consei European pour la Recherce Nuclaire) yang berada di genewa, swiss, ( mengajukan protocol (suatu tatacara untuk berkomunikasi) system distribusi informasi internet yang digunakan untuk berbagai informasi diantaranya para fisikawan. Protocol inilah yang selanjutnya dikenal sebagai protocol World Wide Web dan dikembangkan oleh World Wide Web Consortium (W3C).

2.1.2 Pengertian Website

Website adalah suatu media publikasi elektronik yang terdiri dari halaman-halaman web (web page) yang terhubung satu dengan yang lain menggunakan link yang dilekatkan pada suatu teks atau image. Website dibuat pertama kali oleh Tim Barners Lee pada tahun 1990.


(69)

Website dibangun dengan menggunakan bahasa Hypertext Markup Language (HTML) dan memanfaatkan protokol komunikasi Hypertext Transfer Protocol (HTTP) yang terletak pada application layer pada referensi layer OSI. Halaman website diakses menggunakan aplikasi yang disebut internet browser. Menurut Jasmadi (2008), Fungsi dari website adalah :

1. Fungsi Komunikasi

Website berfungsi sebagai media komunikasi antara pembuat/pemilik dengan pengunjung atau pengunjung dengan pengunjung lain. Komunikasi dilakukan dengan menggunakan aplikasi web messanger, web forum, web chat, web mail, dan lain sebagainya.

2. Fungsi Informasi

Website berfungsi untuk menyediakan informasi bagi pengunjung.

3. Fungsi Hiburan

Website menjadi sarana hiburan, menyediakan layanan online game, video streaming, music streaming, dan lain sebagainya.

4. Fungsi Transaksi

Website berfungsi sebagai sarana untuk melaksanakan transaksi bisnis seperti: online order, pembayaran menggunakan kartu kredit, pembayaran dengan


(70)

e-Browser adalah sebuah program yang berfungsi untuk menjelajahi halaman-halaman web yang terdapat dalam internet. Menjelajahi atau sering disebut browsing adalah suatu aktifitas membuka atau menuju ke situs- situs (server-server) web dan membaca informasi yang ada didalamnya. Beberapa komponen browser yaitu:

1. Menu

Terletak dibagian atas jendela browser, terdiri dari deretan menu yang mengandung perintah-perintah untuk pengaturan, manipulasi tampilan, serta menjalankan perintah browser.

2. Toolbar

Toolbar adalah tombol-tombol navigasi yang digunakan untuk menjelajahi halaman internet. Tombol tersebut antara lain forward untuk ke halaman berikutnya, back menujun halan sebelumnya, stop untuk menghentikan download, search untuk menuju situs web pencari informasi.

3. Bookmark

Berisi alamat-alamat halaman web yang sudah disimpan agar user dapat langsung menuju alamat tersebut tanpa harus mengetikkan atau menghafal lokasinya.


(71)

4. Location Toolbar

Text box ini merupakan alamat lengkap dari halaman yang sedang dilihat.

5. Internet Explorer

Berguna untuk memantau penerimaan data, saat proses download sedang berlangsung maka logo terlihat melakukan gerakan.

6. Layar Utama Browser

Layar ini merupakan tempat tampilan web, yang berisi text, gambar, serta animasi, dan interaksi multimedia.

7. Status Bar

Terdapat pada kiri layar utama. Terdiri dari bagian yang menunjukkan kemajuan download halaman web dan pesan status yang menunjukkan URL yang sedang di tampilkan.


(72)

2.2.1 Pengertian Data

Data merupakan fakta atau bagian dari fakta yang mengandung arti, yang dihubungkan dengan kenyataan, gambar-gambar, kata-kata, angka-angka, huruf atau simbol-simbol menyatakan suatu ide objek kondisi atau situasi dan lain-lain.

Data adalah kenyataan yang menggambarkan suatu kejadian-kejadian dan kesatuan nyata. Kejadian adalah sesuatu yang terjadi pada saat tertentu, contohnya: transaksi. Kesatuan nyata adalah berupa suatu objek nyata seperti tempat, benda dan orang yang betul-betul ada dan terjadi.

Maka dapat disimpulkan bahwa data adalah kenyataan yang menggambarkan kejadian-kejadian, dan masih berbentuk mentah sehingga perlu diolah lebih lanjut sehingga bisa menghasilkan informasi.

2.2.2 Pengolahan Data

Pengolahan data adalah waktu yang digunakan untuk menggambarkan perubahan bentuk data menjadi informasi yang memiliki kegunaan. Semakin banyak data dan kompleksnya aktivitas pengolahan data dalam suatu organisasi, baik itu organisasi


(73)

besar maupun organisasi kecil, maka metode pengolahan data yang tepat sangat dibutuhkan. ( Andri Kristanto, 2007 : 8 ).

Pengolahan data adalah proses operasi sistematis terhadap data. Selama operasi, (misal kalkulasi atau operasi logika) sedang berlangsung, data disimpan sementara dalam prosesor. ( Memahami Sistem Informasi, Witarto, 2004 : 15 ).

Berdasarkan pendapat para ahli tersebut maka dapat disimpulkan bahwa pengolahan data adalah perubahan bentuk data menjadi informasi kemudian melakukan proses operasi sistematis terhadap data yang kemudian disimpan sementara dalam prosesor.

2.2.3 Pengertian Sistem

Suatu sistem adalah jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk menyelesaikan suatu sasaran tertentu. (Andi Kristanto, 2007 : 1).


(74)

suatu tujuan tertentu. ( Andri Kristanto, 2007 : 1 ).

Berdasarkan pendapat para ahli tersebut maka dapat disimpulkan sistem adalah kumpulan elemen-elemen yang saling bekerja sama dan berinteraksi untuk memproses masukan kemudian saling berhubungan, berkumpul bersama-sama untuk mencapai suatu sasaran tertentu.

2.2.4 Pengertian Informasi

Informasi juga berarti kumpulan data yang diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi yang menerimanya. ( Andri Kristanto, 2007 : 7 ).

Informasi adalah rangkaian data yang mempunyai sifat sementara, tergantung dengan waktu, mampu memberi kejutan atau surprise pada yang menerimanya. Informasi dapat juga dikatakan sebagai data yang telah diproses, yang mempunyai nilai tentang tindakan atau keputusan. ( Memahami Sistem Informasi, Witarto, 2004:9 ).

Berdasarkan pendapat para ahli tersebut maka dapat disimpulkan informasi adalah data yang telah diproses kemudian diolah menjadi bentuk yang lebih berguna, digunakan untuk mengambil keputusan.


(75)

2.2.5 Pengertian Sistem Informasi

Sistem informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasasi, dan menyediakan pihak luar tertentu dengan laporan - laporan yang diperlukan. ( Analisis dan Disain Sistem Informasi, Jogiyanto, 2005 :11 ).

Jadi dapat disimpulkan bahwa sistem informasi adalah suatu alat yang membantu dalam menyediakan informasi bagi penerimanya dan untuk membantu dalam pengambilan keputusan bagi manajemen didalam operasi perusahaan sehari-hari dan informasi yang layak untuk pihak luar perusahaan.

2.2.6 Pengertian Basis Data

Basis data (database) adalah kumpulan dari data, yang dapat digambarkan sebagai aktivitas dari satu atau lebih organisasi yang berelasi. ( Andri kristanto 2007 : 73).


(76)

dengan yang lainnya, tersimpan di perangkat keras komputer dan digunakan perangkat lunak untuk memanipulasinya. ( Analisis dan Disain Sistem Informasi, Jogiyanto, 2005:13).

Berdasarkan pendapat para ahli tersebut maka dapat disimpulkan bahwa basis data adalah kumpulan dari data yang saling berhubungan satu dengan yang lainnya dan dapat digambarkan sebagai aktivitas satu atau lebih organisasi yang berelasi.

2.2.7 Pengertian Perancangan Sistem Informasi

Menurut (Jogiyanto, 2001, p62), perancangan merupakan kegiatan untuk membentuk membuat sketsa struktur kegiatan atau pekerjaan dari suatu analisis ke dalam suatu perencanaan untuk dapat diterapkan dalam suatu bentuk nyata.

Pengertian perancangan sistem informasi yang dikemukakan oleh para ahli salah satunya menjelaskan perancangan sistem informasi dapat diuraikan sebagai berikut : Perancangan sistem informasi adalah suatu fase yang diawali dengan evaluasi atas alternatif rancangan sistem yang diikuti dengan penyiapan spesifikasi rancangan yang berorientasi kepada pemakai tertentu dan diakhiri dengan pengajuan rancangan pada manajemen puncak. (Mulyadi, 1997).


(77)

Kesimpulan bahwa perancangan sistem informasi merupakan proses menyusun sistem baru atau mengubah sistem lama berdasarkan evaluasi terhadap sistem yang lama yang terlebih dahulu diajukan kepada pemakai atau manajemen puncak untuk diperhitungkan.

2.3 PHP

2.3.1 Sejarah PHP

PHP pertama kali dibuat tahun 1994 oleh Ramus Lerdorf. Ini berawal saat Ramus membuat sejumlah skrip perl yang dapat mengetahui siapa saja yang melihat homepage-nya. Skrip- skrip ini kemudian dikemas menjadi tool yang disebut “Personal Home Page”. Rasmus adalah salah seorang pendukung open source. Oleh karena Ramus mengeluarkan Personal Home Page Tool versi 1.0, dan pada tahun 1995 menciptakan PHP/FI (Personal Home Page / For Intrepeter) versi 2.0 bersifat open source.

Pada tahun 1996, PHP telah banyak digunakan dalam website di dunia. Tepat November 1997 PHP / FI berhasil diliris dalam bahasa C. Perusahaan


(78)

PHP (PHP: Hypertext Preprocessor) merupakan salah satu dari bahasa pemrograman berbasis website. PHP bersifat server-side programming, artinya kode PHP yang ditulis akan dieksekusi di sisi server sehingga pengunjung tidak dapat melihat source code dari skrip PHP yang dibangun.

2.3.3 Penggabungan Sript PHP dan HTML

Bahasa pemrograman PHP dapat digabungkan dengan HTML. Kode PHP diawali dengan tanda lebih kecil (<) dan ditutup dengsn tanda lebih besar (>). Pemisah antar intruksi adalah tanda titik koma (;). Untuk menambah komentar /*komemtar*/, //komentar, #komentar. Ada 2 penggabungan PHP dan HTML yaitu:

1. Embedded Script

Yaitu script PHP yang disisipkan diantara tag-tag HTML. Contoh penulisan Embedded Script:

<html> <head>

<titte> Embedded Script </title>


(79)

<body> <?php

Echo “SELAMAT DATANG DI PHP”; ?>

</body> </html>

2. Non Embedded Script

Non Embedded Script adalah script program PHP murni. Termasuk tag HTML yang disisipkan dalam script PHP.Contoh penulisan Non Embedded Script:

<?php

Echo”<html>”; Echo”<head>”;

Echo”<title> mengenal PHP </title>; Echo”<head>”;

Echo”<body>”;

Echo”<P> SELAMAT DATANG DI PHP</P>; Echo”</body>”;


(80)

Bahasa pemograman php juga mempunyai kelebihan dan kelemahan. Adapun kelebihan dan kelemahannya sebagai beriku :

a. Kelebihan dari PHP yaitu:

1. PHP memiliki tingkat akses yang lebih cepat.

2. PHP memiliki tingkat lifecycle yang cepat sehingga selalu mengikuti perkembangan teknologi internet.

3. PHP memiliki tingkat keamanan yang tinggi.

4. PHP mampu berjalan dibeberapa server, misalnya Apache, Microsofi.

5. PHP mampu berjalan di LINUX sebagai platform system operasi utama bagi PHP.

6. PHP juga mendukung akses ke beberapa database yang sudah ada. 7. PHP bersifat gratis

b. Kelemahan dari PHP yaitu:

1. Tidak ideal untuk pengembang skala besar.

2. Tidak bisa memisahkan antara tampilan logic dengan baik (walau pengguna template dapat memperbaikinya).

3. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli dalam melakukan pemrograman dan kurang memperhatikan isu dan konfigurasi PHP.


(81)

2.3.5Fungsi PHP dan MySQL

Adapun fungsi PHP untuk mengakses MySQL yang biasa digunakan diantaranya adalah:

1. mysql_connect()

Fungsi mysql_connect adalah untuk menggabungkan PHP dengan database MySQL. Formatnya:

mysql_connect(string hostname, string username, string password);

2. mysql_select_db()

Setelah terhubung ke database MySQL dengan menggunakan mysql_connect, maka langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi mysql_select_db digunakan untuk memilih database. Formatnya: mysql_select_db(string database, koneksi);

3. mysql_query

Dalam database MySQL, perintah untuk melakukan transaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan query.


(82)

Kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL.

Formatnya:

mysql_num_rows (int result);

5. mysql_fetch_array

Fungsi ini berkaitan dengan menampilkan data. Untuk menampilkan data, digunakan fungsi mysql_fetch_array.

Dengan fungsi ini, hasil query ditampung dalam bentuk array. Formatnya: Array rmysql_fetch_array(int result, int[result_type);

2.4MySQL

2.4.1 Sejarah MySQL

MySQL dikembangkan oleh sebuah perusahaan swedia yang bernama TcX Data Konsult AB, dan pada akhirnya berubah menjadi MySQL AB. Sekitar tahun 1994-1995, TcX membuat database MySQL untuk mengembangkan aplikasi web client. TcX merupakan perusahaan pengembang software dan consult database.

Michael Widenius atau disebut “Monty” adalah pengembang satu-satunya di TcX. Awalnya Monty menggunakan mSQL singkatannya mini SQL (Structure


(83)

Query Language). Dan pada versi pertama mSQL tidak memiliki indeks. Maka Monty memutuskan untuk membuat sendiri mesin SQL yang antarmuka mirip dengan SQL, namun memiliki kemampuan yang lebih sesuai kebutuhan sehingga lahirlah MySQL.

Pada bulan Mei 1996 versi 1.0 berhasil dirilis secara terbatas hanya buntuk empat orang saja. Namun di bulan Oktober di tahun yang sama versi 3.11.0 dilepas ke publik. Pada tahun 2000, MySQL AB mengumumkan bahwa sejak versi 3.23.19, MySQL adalah software database.

2.4.2Pengertian DBMS MySQL

DBMS adalah suatu perangkat lunak yang digunakan untuk mengelola, membuat, menghapus, memasukan data, dan melakukan manajemen database lainnya. Salah satu DBMS yang handal adalah MySQL. MySQL merupakan salah satu DBMS (Dababases Management System) yang menggunakan stuktur database relasional (RDBMS).


(84)

Perintah-perintah SQL yang sering digunakan untuk kebutuhan web database adalah:

1. INSERT

Digunakan untuk mengisi data atau menambahkan record pada table.

INSERT INTO nama_tabel(kolom1, kolom2…)VALUES (nilai1, nilai2….);

2. SELECT

Digunakan untuk melihat data dari suatu atau beberapa table.

SELECT kolom-kolom; FROM nama_tabel;

Untuk melihat seluruh isi kolom dari table digunakan query SELECT*

SELECT*FROM nama_tabel;

3. WHERE

Digunakan untuk menyaring hasil query sehingga record yang dikeluarkan hanyalah record yang sesuai dengan keinginan.

SELECT kolom1,kolom2 FROM kolom 1

WHERE kolom2<criteria;


(85)

Digunakan untuk menghapus suatu record dengan criteria tertentu.

DELETE FROM nama_tabel WHERE criteria;

Untuk menghapus record pada suatu table, digunakan perintah DELETE tanpa menentukan criteria.

DELETE FROM nama_tabel;

5. UPDATE

Digunakan untuk memodifikasi nilai kolom dari suatu record.

UPDATE nama_tabel

SET nama_kolom1=nilai_baru1, nilai_kolom2=nilai_baru2… WHERE criteria;

2.5 Data

2.5.1 Pengertian Data

Data dapat didefinisikan sebagai bahan keterangan tentang kejadian-kejadian nyata atu fakt-fakta tertentu yang tidak acak yang menunjukkan jumlah, tindakan,


(86)

Database adalah kumpulan file-file yang saling berelasi, relasi tersebut biasa ditunjukkan dengan kunci dari tiap file yang ada. Satu database menunjukkan satu kumpulan data yang dipakai dalam satu lingkup perusahaan, instansi.

Dalam satu file terdapat record-record yang sejenis, sama besar, sama bentuk, merupakan satu kumpulan entity yang seragam.

Satu record terdiri dari field-field yang saling berhubungan untuk menunjukkan bahwa field tersebut dalam satu pengertian yang lengkap dan direkam dalam satu record (Kristanto, 2004).

2.5.3 Perancangan Database

Proses perancangan database, terlepas dari masalah yang ditangani, terbagi menjadi 3 tahap yaitu:

1. Perancangan database secara konseptual

Merupakan upaya untuk membuat model database yang masih bersifat konsep.

2. Perancangan database secara logis


(87)

yang dipakai (model relasional, hirarkis, atau jaringan). Perancangan ini tidak bergantung pada DBMS yang akan dipakai. Itulah sebabnya perancangan database logis disebut juga pmetaan data.

3. Perancangan database secara fisis

Merupakan tahapan untuk menuangkan parancangan database yang bersifat logis menjadi database fisis yang tersimpan dalam media penyimpanan eksternal (yang spesifik terhadap DBMS yang dipakai).

2.5.4 Contex Diagram

Context diagram berisi gambaran umum (secara garis besar) sistem yang akan dibuat. Dapat dikatakan bahwa context diagram berisi siapa saja yang memberi data (dan data apa saja) ke sistem, serta kepada siapa saja informasi (dan informasi apa saja) yang harus dihasilkan sistem. Context Diagram menyoroti sejumlah karakteristik penting sistem, yaitu :

1. Kelompok pemakai, organisasi atau sistem lain dimana sistem melakukan komunikasi (sebagai terminator).


(88)

digunakan oleh sistem. Hal ini berarti pembuatan simbol data storage dalam CD dibenarkan, dengan syarat simbol tersebut merupakan bagian dari dunia diluar sistem.

2.5.5 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan alat yang digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir ataupun lingkungan fisik dimana data tersebut akan disimpan (Jogiyanto, HM, 2005).

NO Gambar Nama Fungsi

1 Kesatuan luar

(External entity)

Merupakan kesatuan luar di lingkungan yang akan member input atau menerima output dari sistem

2 Proses

(Process)

Kegiatan dari hasil suatu arus data yang masuk dalam proses untuk dihasilkan arus yang akan keluar atau mengubah input menjadi


(89)

output

3 Aliran Data

(Data Flow)

Data mengalir melalui system, dimulai dengan sebagian input diubah atau diproses menjadi output

4 Penyimpanan Data

(Data Storage)

Data disimpan untuk keperluan berikutnya

Gambar 2.5.5 simbol-simbol DFD

2.5.6 Entity Relationship Diagram (ERD)

Menurut Janner Simarmata dan Iman Paryudi (2006), struktur yang mendasari suatu basisdata adalah model data yang merupakan kumpulan alat-alat konseptual untuk mendeskripsikan data, relasi data, data semantic dan batasan konsistensi. Untuk mengilustrasikan konsep model data salah satunya menggunakan Entity Relationship Diagram (ERD).


(90)

1 Entitas dimana menggambarkan suatu objek yang dapat diidentifikasi dalam sebuah lingkungan.

2 Atribut memiliki fungsi mendeskrisikan karakter entitas

3 Gambar disamping menunjukkan sebuah hubungan atau relasi antar entitas.

4 Garis adalah sebagai penghubung antara himpunan relasi dengan himpunan entitas dan himpunan entitas dengan atributnya.

Gambar 2.5.6 simbol dalam ERD

2.5.7 Flowchart

Flowchart dikembangkan oleh Herman Goldstine dan John von Neumann di tahun 1940-an, sebagai representasi grafis dari keputusan dan hasil keputusan dipetakan dalam bentuk individu. Flowchart menggunakan simbol yang berbeda yang berisi informasi tentang langkah-langkah atau urutan kejadian. Masing-masing dari simbol-simbol ini terkait dengan panah untuk menggambarkan arah aliran proses. Bagan alur (flowchart) adalah bagan (chart) yang menunjukan hasil (flow)


(91)

didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi.

Pengertian flowchart dapat disimpulkan sebagai sebuah metodologi yang digunakan untuk menganalisis, meningkatkan, dokumen dan mengelola proses atau program. Flowchart merupakan cara penyajian dari suatu algoritma.

Flowchart membantu untuk:

1. Untuk menerangkan logika suatu program

2. Pemahaman hubungan antara langkah-langkah proses yang berbeda 3. Mengumpulkan data tentang proses tertentu

4. Membantu dengan pengambilan keputusan 5. Mengukur kinerja proses

6. Menggambarkan struktur proses

7. Mempermudah dalam pelacakan kesalahan aliran proses

8. Menyoroti langkah-langkah penting dan menghilangkan langkah-langkah yang tidak perlu

Pedoman dalam menggambar suatu bagan alir, analis sistem atau pemrograman sebagai berikut;


(92)

berakhirnya.

4. Masing-masing kegiatan didalam bagan alir sebaiknya digunakan suatu kata yang mewakili suatu pekerjaan, misalnya;“persiapkan” dokumen “hitung” gaji.

5. Masing-masing kegiatan didalam bagan alir harus didalm urutan yang semestinya.

6. Kegiatan yang terpotong dan akan disambung ketempat lain harus ditunjukan dengan jelas menggunakan symbol penghubung.

7. Gunakanlah symbol-simbol bagan alir yang standar.

Simbol-simbol flowchart yang digunakan Gilbreth kurang dikenal secara umum. Ini mungkin karena meluasnya penggunaan Microsoft Office, yang mana Microsoft Office merujuk simbol dasar flowchart kepada simbol-simbol flowchart untuk pengolahan data (data processing). Sejauh yang saya tahu simbol-simbol ini sama persis dengan template yang digunakan IBM pada 1960-an untuk simbol flowchart pengolah1960-an data. Berikut bentuk simbol-simbol tersebut:


(93)

(94)

2.6.1 Pengertian Macromedia Dreamweaver

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing.

Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.


(95)

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs.

Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.

2.6.2 Macromedia Dreameaver 8

Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML. Area Kerja Dreamweaver 8


(96)

Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih.

a. Open a Recent Item

Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain.

b.Create New

Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.

c. Create From Samples

Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver.


(97)

1. Halaman Utama Dreamweaver 8

Gambar 2.6.3 Halaman Utama Dreamweaver 8

Keterangan :

1. Toolbar Dokumen

Toolbar dokumen digunakan untuk mengubah tampilan dan mengakses fungsi-fungsi penting secara cepat dan mudah. Pada toolbar dokumen terdapat menu untuk berpindah antar dokumen kerja window dan mengatur tampilan area kerja. Untuk mengatur tampilan kita bisa memilih Code, Split dan Design.


(98)

Insert bar merupakan tempa semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab.

Gambar 1.3 Tampilan Insert bar sebagai tab

Gambar 2.6.4 Tampilan Insert bar sebagai menu

a. Tab Common

Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.


(99)

b. Tab Layout

Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout. · Untuk Standard view tampilan dokumen seperti biasa

· Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya.

· Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.

c. Tab Form

Tab form digunakan untuk membuat elemen dalam form, misalnya saja textfield, radio textarea, button, checkbox.

d. Tab Text

Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline.

e. Tab HTML


(100)

suatu bahasa pemrograman dan sebuah database.

g. Tab Flash elements

Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.

1. Code View

Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.

2. Panel Properties

Panel properties merupakan panel yang digunakan untuk melihat dan mengubah property dari semua objek yang ada di area kerja. Masing-masing objek mempunyai property yang berbeda. Untuk melihat property dari objek yang diinginkan, seleksi dulu objek tersebut.

3. Design View

Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.


(1)

BAB 3 Analisis dan Perancangan Sistem 44

3.1Analisis Sistem 44

3.2Perancangan Sistem 44

3.2.1 Desain Sistem 45

3.2.2 Desain Basis Data (Database) 47

3.2.3 Flowchart Sistem 52

3.2.3.1 Flowchart Halaman Utama 52

3.2.3.2 Flowchart Halaman Login Admin 53 3.2.3.3 Flowchart Halaman Login Member 54 3.2.3.4 Flowchart Halaman Menu Admin 55 3.2.3.5 Flowchart Halaman Menu Member 56

3.3Desain Visitor Area 57

3.3.1 Desain Halaman Utama 57

3.3.2 Desain Halaman About 58

3.3.3 Desain Halaman Sejarah 59

3.3.4 Desain Halaman Visimisi 60

3.3.5 Desain Halaman Prestasi 61

3.3.6 Desain Halaman Kegiatan 62

3.3.7 Desain Halaman Peringkat 63

3.3.8 Desain Halaman Registrasi Member 64

3.4 Desain Member Area 65

3.4.1 Desain Halaman Utama Member 65

3.4.2 Desain Halaman Menu Anggota Baru 66 3.4.3 Desain Halaman Aturan Pertandingan 66

3.4.4 Desain Halaman Sanksi - Sanksi 67

3.4.5 Desain Halaman Daftar Anggota Aktif 68

3.4.6 Desain Halaman Download file 69

3.4.7 Desain Halaman Data Iuran 70

3.4.8 Desain Halaman Logout 71

3.5 Desain Admin Area 73

3.5.1 Desain Halaman Utama Admin 73


(2)

3.5.3 Desain Halaman Upload Data Anggota 75 3.5.4 Desain Halaman Input Peringkat Anggota 76 3.5.6 Desain Halaman Lihat Data Anggota 77

3.5.7 Desain Halaman Lihat Data Iuran 78

3.5.8 Desain Halaman Lihat Data Peringkat 79

3.5.9 Desain Halaman Profil Admin 80

3.5.10 Desain Halaman Edit Profil Admin 81 3.5.11 Desain Halaman Ganti Password Admin 81

BAB 4 Implementasi dan Pembahasan 83

4.1Implementasi Sistem 83

4.2Halaman Sistem Informasi UKM Tenis Meja USU Berbasis Web 83

4.2.1 Visitor Area 84

4.2.1.1 Halaman Utama 84

4.2.1.2 Halaman About 85

4.2.1.3 Halaman Sejarah 85

4.2.1.4 Halaman Visi Misi 86

` 4.2.1.5 Halaman Halaman Prestasi 87

4.2.1.6 Halaman Kegiatan 88

4.2.1.7 Halaman Peringkat 88

4.2.1.1 Halaman Member 89

4.2.2 Member Area 90

4.2.2.1 Halaman Utama Member 90

4.2.2.2 Halaman Menu Anggota Baru Member 91 4.2.2.3 Halaman Aturan Pertandingan Member 92 4.2.2.4 Halaman Sanksi – sanks Memberi 93 4.2.2.5 Halaman Daftar Anggota Aktif Member 94 4.2.2.6 Halaman Download File Member 95

4.2.2.7 Halaman Data Iuran Member 96

4.2.2.8 Halaman Logout 98

4.2.3 Admin Area

4.2.3.1 Halaman Home Admin 98

Universitas Sumatera Utara Universitas Sumatera Utara


(3)

4.2.3.1 Halaman Input Data Iuran Admin 99 4.2.3.1 Halaman Home Upload Data Anggota 100 4.2.3.1 Halaman Input Data Peringkat Admin 101 4.2.3.1 Halaman Lihat Data Anggota Admin 102

4.2.3.1 Halaman Lihat Data Iuran Admin 103

4.2.3.1 Halaman Lihat Data Peringkat Admin 104

4.2.3.1 Halaman Profil Admin 105

4.2.3.1 Halaman Edit Profil Admin 106

4.2.3.1 Halaman Ganti Password Admin 106

4.2.3.1 Halaman Logout Admin 107

BAB 5 Penutup 108

5.1Kesimpulan 108

5.2Saran 110

Daftar Pustaka 88


(4)

DAFTAR TABEL

Nomor Judul Halaman

Tabel

3.1. Tabel Admin 48 3.2. Tabel Data Peringkat 48 3.3. Tabel Data iuran 49

3.4. Tabel Member 50

3.5. Tabel Download 51

Universitas Sumatera Utara Universitas Sumatera Utara


(5)

DAFTAR GAMBAR

Nomor Judul Halaman

Gambar

2.5.5 Simbol – simbol DFD 29

2.5.6 Simbol Dalam ERD 30

2.5.7 Simbol Flochart 33

2.6.2 Halaman Awal Dreamweaver 8 35

2.6.3 Halaman Utama Dreamweaver 8 37

2.6.4 Tampilan Insert bar sebagai menu 38

2.6.5 Manage Site 41

3.1 Diagram Konteks 45

3.2 Data Flo Diagram level 1 46

3.3 Entity Relationship Diagram(ERD) 47

3.4 Flochart Halaman Utama 52

3.5 Flochart Halaman Login Admin 53

3.6 Flochart Halaman Login Member 54

3.7 Flochart Halaman Menu Admin 55

3.8 Flochart Halaman Menu Member 56

3.9 Tampilan Halaman Utama 57

3.10 Tampilan Halaman About 58

3.11 Tampilan Halaman Sejarah 59

3.12 Tampilan Halaman Visi Misi 60

3.13 Tampilan Halaman Prestasi 61

3.14 Tampilan Halaman Kegiatan 62

3.15 Tampilan Halaman Peringkat 63

3.16 Tampilan Halaman Registrasi Member 64

3.17 Tampilan Halaman Utama Member 65

3.18 Tampilan Halaman Menu Anggota Baru Member 66

3.19 Tampilan Halaman Aturan Pertandingan Member 67 3.20 Tampilan Halaman Menu sanksi – sanksi Member 68 3.21 Tampilan Halaman Menu Daftar Anggota Aktif Member 68

3.22 Tampilan Halaman Menu Download file Member 68

3.23 Tampilan Halaman Menu Data Iuran Member 68

3.24 Tampilan Halaman Menu Logout Member 68

3.25 Tampilan Halaman Utama Admin 68

3.26 Tampilan Halaman Input Data Iuran 68

3.27 Tampilan Halaman Upload Data 68

3.28 Tampilan Halaman Halaman Input Peringkat 68

3.29 Tampilan Halaman Lihat Anggota 68

3.30 Tampilan Halaman Lihat Data Iuran 68

3.31 Tampilan Halaman Lihat Data Peringkat 68

3.32 Tampilan Halaman Profil Admin 68


(6)

3.34 Tampilan Halaman Ganti Password Admin 68

4.1 Tampilan Halaman Utama 84

4.2 Tampilan Halaman About 85

4.3 Tampilan Halaman Sejarah 86

4.4 Tampilan Halaman Visi Misi 87

4.5 Tampilan Halaman Prestasi 88

4.6 Tampilan Halaman Kegiatan 89

4.7 Tampilan Halaman Peringkat 90

4.8 Tampilan Halaman Registrasi Member 91

4.9 Tampilan Halaman Utama Member 92

4.10 Tampilan Halaman Menu Anggota Baru Member 93

4.11 Tampilan Halaman Aturan Pertandingan Member 94 4.12 Tampilan Halaman Menu sanksi – sanksi Member 95 4.13 Tampilan Halaman Menu Daftar Anggota Aktif Member 96

4.14 Tampilan Halaman Menu Download file Member 97

4.15 Tampilan Halaman Menu Data Iuran Member 98

4.16 Tampilan Halaman Menu Logout Member 99

4.17 Tampilan Halaman Utama Admin 100

4.18 Tampilan Halaman Input Data Iuran 101

4.19 Tampilan Halaman Upload Data 102

4.20 Tampilan Halaman Halaman Input Peringkat 103

4.21 Tampilan Halaman Lihat Anggota 104

4.22 Tampilan Halaman Lihat Data Iuran 105

4.23 Tampilan Halaman Lihat Data Peringkat 106

4.24 Tampilan Halaman Profil Admin 107

4.25 Tampilan Halaman Edit Profil Admin 108

4.26 Tampilan Halaman Ganti Password Admin 109

Universitas Sumatera Utara Universitas Sumatera Utara