• Tidak ada hasil yang ditemukan

Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web

N/A
N/A
Protected

Academic year: 2016

Membagikan "Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web"

Copied!
125
0
0

Teks penuh

(1)

USU BERBASIS WEB

TUGAS AKHIR

MUHAMMAD AGUS TRI MUNANDAR

122406054

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN

ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

(2)

PERANCANGAN SISTEM INFORMASI UKM TENIS MEJA

USU BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

MUHAMMAD AGUS TRI MUNANDAR

122406054

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN

ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

(3)

PERSETUJUAN

Judul : Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web

Kategori : Tugas Akhir

Nama : Muhammad Agus Tri Munandar

Nomor Induk Mahasiswa : 122406054

Program Studi : Diploma 3 Teknik Informatika Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam Universitas Sumatera Utara

Disetujui di Medan, Juli 2015

Disetujui Oleh

Program Studi D3 Teknik Informatika Pembimbing, FMIPA USU

Ketua,

(4)

PERNYATAAN

PERANCANGAN SISTEM INFORMASI UKM TENIS MEJA USU BERBASIS WEB

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juli 2015

(5)

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha Penyayang, dengan limpah karunia-Nya Penulis dapat menyelesaikan penyusunan tugas akhir ini dengan judul Perancangan Sistem Informasi UKM Tenis Meja USU Berbasis Web.

(6)

PERANCANGAN SISTEM INFORMASI UKM TENIS MEJA USU BERBASIS WEB

ABSTRAK

(7)

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Tabel ix

Daftar Gambar x

BAB 1 Pendahuluan 1

1.1Latar Belakang Masalah 1

1.2Identifikasi Masalah 2

1.3Batasan Masalah 3

1.4Tujuan 3

1.5Manfaat 4

1.6Metodologi 4

1.7Sistematika Penulisan 6

BAB 2 Landasan Teori 8

2.1Website 8

2.1.1 Sejarah Website 8

2.1.2 Pengertian Website 8

2.1.3 Browser 10

2.2Pengertian Sistem Informasi 12

2.2.1 Pengertian Data 12

2.2.2 Pengolahan Data 12

2.2.3 Pengertian Sistem 13

(8)

2.2.6 Pengertian Basis Data 15 2.2.7 Pengertian Perancangan Informasi 16

2.3 PHP 17

2.3.1 Sejarah PHP 17

2.3.2 Pengertian PHP 18

2.3.3 Penggabungan Script PHP dan HTML 18

2.3.4 Kelebihan dan Kelemahan PHP 20

2.3.5 Fungsi PHP dan MySQL 21

2.4MySQL 22

2.4.1 Sejarah MySQL 22

2.4.2 Pengertian DBMS MySQL 23

2.4.3 Perintah SQL 24

2.5Data 25

2.5.1 Pengertian Data 25

2.5.2 Pengertian Database 26

2.5.3 Perancangan Database 26

2.5.4 Contex Diagram 27

2.5.5 Data Flow Diagram (DFD) 28

2.5.6 Entity Relationship Diagram (ERD) 29

2.5.7 Flowchart 30

2.6Macromedia Dreamweaver 34

2.6.1 Pengertian Macromedia Dreamweaver 34

2.6.2 Macromedia Dreamweaver 8 35

(9)

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

(10)

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

(11)

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

(12)

DAFTAR TABEL

Nomor Judul Halaman Tabel

(13)

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

(14)

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

(15)

PERANCANGAN SISTEM INFORMASI UKM TENIS MEJA USU BERBASIS WEB

ABSTRAK

(16)

PENDAHULUAN

1.1 Latar Belakang Masalah

Teknologi Informasi sekarang ini sudah semakin berkembang, dan perkembangan itu membutuhkan sumber daya manusia dengan pemikiran yang maju, sehingga dapat memanfaatkan teknologi yang tersedia. Dengan perkembangan teknologi terutama dalam bidang informatika, maka telah banyak pengembangan komputerisasi yang lebih mempermudah dan mempercepat serta menghemat waktu atau dengan kata lain lebih efektif dalam penyelesaian pekerjaan yang pada awalnya di lakukan secara cara konvensional. Hasil perkembangan teknologi saat ini yang di rasakan sangat pesat adalah teknologi Sistem Informasi yang mengarah pada database komputer.

(17)

olahraga Tenis Meja. Karena sampai saat ini informasi mengenai Tenis Meja masih belum dikenal oleh masyarakat luas. Sehingga masih banyak masyarakat yang belum mengetahui peraturan-peraturan terbaru dan informasi-informasi terbaru. Untuk mempermudah perancangan sistem informasi UKM Tenis Meja USU dengan menggunakan Sehingga untuk mengatasi permasalahan di atas penulis akan membuat tugas akhir dengan judul :

“PERANCANGAN SISTEM INFORMASI UKM TENIS MEJA USU BERBASIS WEB”

1.2 Identifikasi Masalah

Sesuai dengan latar belakang masalah di atas dapat di rumuskan menjadi beberapa masalah sebagai berikut :

1. Suatu aplikasi layaknya dirancang untuk mengatasi masalah yang dilakukan secara konvensional oleh user untuk mengatasi permasalahan agar dapat dilakukan lebih efektif dan efisien.

2. Bagaimana cara admin untuk menginput regristrasi pembayaran iuran perbulan, menginput nama-nama anggota UKM Tenis Meja dan menginput berita seputar olahraga Tenis Meja di Sumatra Utara.

(18)

1.3Batasan Masalah

Dalam perancangan sistem informasi UKM Tenis Meja USU ini dilakukan beberapa batasan sebagai berikut :

1. Sistem ini dibangun menggunakan bahasa pemrograman PHP dan MYSQL dikarenakan aplikasi ini lebih mudah di gunakan dari pada bahasa pemograman yang lainnya.

2. Cakupan sistem pengisian rapor ini adalah untuk membantu bendahara dalam pengisian iuran bulanan dan untuk membantu para pencinta olahraga Tenis Meja dapat lebih mudah mengetahui informasi seputar Olahraga Tenis Meja.

3. Aplikasi ini hanya sebatas data anggota,data iuran dan data anggota berprestasi serta berita terbaru seputar olahraga Tenis Meja.

1.4 Tujuan

Tujuan dalam perancangan sistem informasi UKM Tenis Meja USU ini adalah: 1. Sebagai syarat untuk penyelesaian tugas akhir kelulusan program D3 Teknik

Informatika Universitas Sumatera Utara.

2. Untuk memberi informasi kepada pecinta Tenis Meja mengenai peraturan-peraturan permainan dalam Tenis Meja.

(19)

1.5 Manfaat

Manfaat yang diperoleh dari sistem informasi UKM Tenis Meja USU ini adalah: 1. Memberikan kemudahan bagi para user pengguna web sistem informasi

UKM Tenis Meja USU agar dapat mempermudah mengetahui informasi seputar olahraga Tenis Meja.

2. Memberi kemudahan bagi admin dalam pengisian iuaran bulanan.

3. Memberi kemudahan untuk para calon anggota baru dalam dalam pengisian biodata untuk pendaftaran.

4. Memberi kemudahan bagi perusahaan yang ingin merekrut atlit Tenis Meja dari USU.

1.6 Metodologi

Metodologi penelitian yang digunakan penulis untuk menyelesaikan permasalah yang terjadi di atas adalah :

1. Pengumpulan data yang erat kaitannya dengan permasalahan dengan cara membaca buku-buku, makalah dan membaca bahan-bahan sumber lainnya di perpustakaan USU.

(20)

Metodologi penelitian yang digunakan penulis untuk menyelesaikan permasalah yang terjadi di atas adalah :

1. Studi Literatur

Pengumpulan data yang erat kaitannya dengan permasalahan dengan cara membaca buku-buku, makalah dan membaca bahan-bahan sumber lainnya di perpustakaan USU.

2. Analisis Sistem

Melakukan analisis sistem terhadap masalah yang ada mengenai sistem informasi UKM Tenis Meja USU.

3. Desain Sistem

Pada tahap ini dilakukan perancangan program, membuat desain webside UKM Tenis Meja USU.

4. Uji Coba

Melakukan pengujian program, menangani dan memperbaiki kesalahan yang ada pada webside UKM Tenis Meja USU tersebut agar dapat berjalan dengan baik.

5. Dokumentasi

(21)

1.7 Sistematika Penulisan

Maksud dan Tujuan dari pembuatan sistematika penulisan Tugas Akhir ini adalah untuk mempermudah penulis dalam membuat dan menyelesaikan permasalahan yang dianalisis oleh penulis sehingga lebih terarah dan lebih terfokus serta diuraikan bab per bab. Sistematika penulisan laporan ini adalah :

BAB1 : PENDAHULUAN

Bab ini menguraikan tentang latar belakang pemilihan judul, ruang

lingkup permasalahan, tujuan dan manfaat penelitian, metode penelitian, sistem penelitian.

BAB 2 : LANDASAN TEORI

Bab ini menjelaskan uraian teoritis tentang landasan teori yang berhubungan dengan penelitian yang dilakukan.

BAB 3 : PERANCANGAN SISTEM

(22)

BAB 4 : IMPLEMENTASI DAN PEMBAHASAN

Bab ini berisikan tentang implementasi sistem dan juga kebutuhan mengenai sistem pengujian program.

BAB 5 : KESIMPULAN DAN SARAN

Bab ini berisikan tentang kesimpulan dan saran mengenai hasil

(23)

BAB 2

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

(24)

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

(25)

2.1.3 Browser

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

(26)

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

(27)

2.2 Pengertian Sistem Informasi

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

(28)

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

(29)

Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk mencapai 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 ).

(30)

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

(31)

Basis data merupakan kumpulan dari data yang saling berhubungan satu 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.

(32)

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.

(33)

2.3.2 Pengertian PHP

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>

(34)

<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>”;

(35)

2.3.4Kelebihan dan Kelemahan PHP

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

(36)

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.

Query memberi perintah kepada database untuk melaukan apa yanh

dikehendaki. Formatnya:

(37)

4. mysql_num_rows()

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.

(38)

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

(39)

2.4.3 Perintah SQL

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;

(40)

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

(41)

2.5.2 Pengertian Database

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

(42)

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

2. Data masuk, yaitu data yang diterima sistem dari lingkungan dan harus diproses dengan cara tertentu.

3. Data keluar, yaitu data yang dihasilkan sistem dan diberikan ke dunia luar. 4. Penyimpanan data, yaitu penyimpanan yang digunakan secara bersama antara

(43)

digunakanoleh lingkungan atau sebaliknya dibuat oleh lingkungan dan 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)

(44)

output

3 Aliran Data

(Data Flow)

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

4 Penyimpanan Data

(Data Storage)

[image:44.595.108.517.83.351.2]

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

ERD didasarkan pada persepsi terhadap dunia nyata yang tersusun atas

kumpulan objek-objek dasar yang disebut entitas dan hubungan antarobjek. Entitas adalah sesuatu atau objek dalam dunia nyata yang dapat dibedakan dari

(45)

NO Simbol Keterangan

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

[image:45.595.108.527.81.405.2]
(46)

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;

1. Bagan alir sebaiknya digambar dari atas ke bawah dan mulai dari bagian kiri dari suatu halaman.

(47)

3. Harus ditunjukan darimana kegiatan akan dimulai dan dimana akan 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.

(48)
[image:48.595.115.516.85.534.2]
(49)

2.6 Macromedia Dreameaver

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.

(50)

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

[image:50.595.115.355.498.703.2]

1. Halaman Awal

(51)

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

(52)

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.

2. Menu Utama

(53)

3. Insert Bar

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

(54)

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

Tab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag , dan frame.

(55)

Tab application digunakan jika aplikasi kita sudah berhubungan dengan 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

(56)

1. Panel Group

Panel group terdiri dari beberapa panel yang digunakan sebagai window pembantu untuk bekerja di Dreamweaver. Terdapat lima buah panel yaitu Design, Code, Application, Tag Inspector dan Files.

Pada panel Files berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu site ke dalam area kerja Dreamweaver. Pada panel code berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya. Panel Design berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

2. Mendefinisikan Site

Dreamweaver memberikan kemudahan dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu diperlukan pengaturan agar Dreamweaver mengenali file-file Anda. Mendefinisikan site artinya mendefinisikan project baru kepada area kerja Dreamweaver.

Untuk mendefinisikan site baru, klik menu Site > Manage Site maka akan muncultampilan berikut.

(57)

Kemudian pilih New > Site untuk menampilkan window baru yang berisi pengaturan site yang akan dibuat. Atau anda juga dapat mengaksesnya melalui menu utama Site > New Site. Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini keterangannya :

1. Pada isian Site Name, isikan nama project Anda atau nama situs Anda.

2. Local Root Folder merupakan folder utama project anda. Beri centeng

pada refresh local file list Automatically agar file terbaru anda muncul di Dreamweaver.

3. Default Image Folder merupakan folder tempat file-file gambar anda

disimpan. Default Image Folder harus berada di dalam Local Root Folder.

4. Jika anda sudah mempunyai domain isikan alamat domain Anda di isian HTTP Address agar semua link yang ada pada ahalaman web anda selalu dicek.

5. Enable Cache memungkinkan Dreamweaver menggunakan temporary file ketika anda mengetes halaman web anda (Preview in Browser) pada browser di computer local. Fungsinya untuk mempercepat proses

(58)

2.7 Sublime Text

Pada website ini, penulis menggunakan sublime Text 2. Sublime Text 2 adalah editor teks yang dirancang untuk mengolah potongan-potongan kode, plugin, dan markup. Tetapi Anda juga bisa memakainya untuk menulis artikel dan mengetik dalam prosa normal.

Keunggulan Sublime Text 2 ada di kualitas dan kuantitas fitur-fiturnya seperti blok multitempat, kursor banyak, dan pengolahan split. Bermacam-macam fitur ini membuat pengolahan kode menjadi lebih cepat dan mudah. Fitur lain yang menarik adalah dukungannya pada berbagai macam bahasa seperti Clojure, Perl, Javascript, Haskell, Erlango, dan Escala. Anda juga bisa membuat dan menyimpan macro kapan saja, pekerjaan menjadi lebih mudah dengan banyaknys opsi yang bisa dipilih.

(59)

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

(60)

3.2.1 Desain Sistem

1. Diagram Context

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

berikut:

Gambar 3.1 Diagram Konteks

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 Member Data Iuran Download Info Aturan Pertandingan Sanksi-Sanksi Data Anggota aktif

Laporan Data Peringkat

(61)

2. DFD (Data Flow Diagram)

Data Flow Diagram (DFD) merupakan pengembangan dari ConVarchar Diagram

(yang terdiri dari DFD Level 1 pada Aplikasi Pengisian Sistem Raport Siswa.

(62)

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)

(63)

2. Struktur Data

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

(64)

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

(65)

4. Tabel Member

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

(66)

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

(67)

3.2.3 Flowchart Sistem

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

(68)

3.2.3.2 Flowchart Sistem

Gambar 3.5 Flochart Halaman Login Admin

(69)
[image:69.595.116.511.70.568.2]

Gambar 3.6 Flochart Halaman Login Member

(70)

Gambar 3.7 Flochart Halaman Menu Admin

(71)
(72)

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.

Gambar 3.9 Tampilan Halaman Utama

Header

Home

About

Peringkat

Member

Gambar

(73)

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

(74)

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.

Gambar 3.11 Tampilan Halaman Sejarah

Header

Home

About

Peringkat

Member

Text

(75)

3.3.4 Desain Halaman Visi Misi

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

(76)

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

3.3.6 Desain Halaman Kegiatan

Halaman ini merupakan halaman kegiatan dari website UKM Tenis Meja USU, Pada halaman ini terdapat informasi tentang apa saja kegiatan - kegiatan yang telah di akukan oleh anggota UKM Tenis Meja USU.

Header

Home

About

Peringkat

Member

Text

(77)

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

(78)

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

(79)

Halaman ini merupakan halaman member yang di dalamnya terletak menu

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

(80)

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

Gambar 3.17 Tampilan Halaman Utama Member

Header

Beranda Download

fil

Data Iuran

Logout

Footer

Text

Menu

Ketentuan Anggota Baru

Aturan Pertandingan

Sanksi - sanksi

(81)

3.3.10 Desain Halaman Menu Anggota Baru

[image:81.595.114.499.210.526.2]

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

(82)
[image:82.595.114.499.84.395.2]

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

(83)
[image:83.595.113.497.84.391.2]

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

(84)
[image:84.595.114.496.93.403.2]

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

(85)
[image:85.595.100.483.124.431.2]

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

(86)
[image:86.595.125.509.63.378.2]

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

(87)

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

(88)

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

(89)

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

(90)

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

(91)

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

(92)

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

(93)

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

(94)

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

(95)

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

(96)

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

(97)

BAB 4

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

(98)

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

[image:98.595.115.508.498.703.2]

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.

(99)

4.2.1.2 Halaman About

[image:99.595.115.502.223.432.2]

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

(100)
[image:100.595.114.502.84.293.2]

Gambar 4.3 Tampilan Halaman Sejarah

4.2.1.4 Halaman Visi Misi

(101)
[image:101.595.116.507.84.295.2]

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.

[image:101.595.114.503.497.707.2]
(102)

4.2.1.6 Halaman Kegiatan

[image:102.595.115.503.304.514.2]

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

4.2.1.7 Halaman Peringkat

(103)
[image:103.595.115.507.194.405.2]

yang ingin mengcruitment atlit-atlit yang di inginkan mereka, karna mereka tidak 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.

(104)
[image:104.595.118.508.84.294.2]

Gambar 4.8 Tampilan Halaman Menu Member

4.2.2 Member Area

4.2.2.1 Halaman Utama Member

(105)
[image:105.595.114.502.83.296.2]

Gambar 4.9 Tampilan Halaman Utama Member

4.2.2.2 Halaman Daftar Anggota Aktif member

(106)
[image:106.595.115.579.84.319.2]

Gambar 4.10 Tampilan HalamaDaftar Anggota Aktif

4.2.2.3 Halaman Sanksi-sanksi Member

(107)
[image:107.595.114.501.83.294.2]

Gambar 4.11 Tampilan Halaman Sanksi-sanksi Member

4.2.2.4 Halaman Aturan Pertandingan Member

(108)
[image:108.595.114.501.85.296.2]

Gambar 4.12 Tampilan Halaman Aturan Pertandingan

4.2.2.5 Halaman Ketentuan Anggota Baru Member

(109)
[image:109.595.117.498.85.294.2]

Gambar 4.13 Tampilan Halaman Ketentuan Anggota Baru Member

4.2.2.6 Halaman Dowload File Member

(110)
[image:110.595.115.502.84.295.2]

Gambar 4.14 Tampilan Halaman Download File Member

4.2.2.7 Halaman Data Iuran Member

(111)
[image:111.595.113.505.85.293.2] [image:111.595.117.496.385.596.2]

Gambar 4.15.1 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota

(112)

4.2.2.8 Halaman Logout

[image:112.595.114.505.248.459.2]

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

4.2.3.1 Halaman Home Admin

(113)
[image:113.595.115.501.112.320.2]

Gambar 4.17 Tampilan Halaman Home Admin

4.2.3.2 Halaman Input Data Iuran Admin

(114)
[image:114.595.114.501.85.294.2]

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.

(115)

Gambar 4.19 Tampilan Halaman Upload Data Anggota Admin

4.2.3.4 Halaman Input Data Peringkat Admin

(116)

Gambar 4.20 Tampilan Halaman Input Data Anggota Admin

4.2.3.5 Halaman Lihat Data Anggota Admin

(117)

Gambar 4.21 Tampilan Halaman Lihat Data Anggota Admin

4.2.3.6 Halaman Lihat Data Iuran

(118)

Gambar 4.22 Tampilan Halaman Data Iuran

4.2.3.7 Halaman Lihat Data Peringkat

(119)

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.

(120)

4.2.3.9 Halaman Edit Profil Admin

Pada halaman ini, admin dapat mengubah nama dan no hp ad

Gambar

Gambar 2.5.5 simbol-simbol DFD
Gambar disamping menunjukkan sebuah hubungan atau
Gambar 2.5.7 Simbol Flowchart
Gambar 2.6.2  Halaman awal Dreamweaver 8
+7

Referensi

Dokumen terkait

Bentuk masa dan ruang yang organis dengan ketinggian bervariasi, dimensi bangunan berskala anak, komposisi warna polichromatic yang hangat, memaksimalkan komponen landscape

Seperti halnya guru, faktor-faktor yang dapat memengaruhi proses pembelajaran dilihat dari aspek siswa meliputi aspek latar belakang siswa yang menurut Dunkin

Ranah pengetahuan menggamiti materi ajar agar peserta didik tahu tentang “apa” yang pada akhirnya peningkatan dan keseimbangan antara kemampuan untuk menjadi manusia

“ Perlu diketahui, Alas Pur wo ini tingkat kunjungannya paling tinggi, padahal karakteristiknya biodiversity. Sedangkan taman nasional lain dengan kunjungan tinggi

Praktik Pengalaman Lapangan adalah semua kegiatan kurikuler yang harus dilakukan oleh mahasiswa praktikan, sebagai pelatihan untuk menerapkan teori yang diperoleh

26 Sri Wiji Lestari, “ Analisis Proses Berpikir Kritis Siswa Dalam Memecahkan Masalah Matematika pada Pokok Bahasan Himpunan Ditinjau dari Tipe Kepribadian

Penentuan komposisi bahan-bahan yang dibutuhkan dalam sintesis nanokomposit hidroksiapatit/kitosan (n-HA/CS) adalah dengan melihat perbandingan variasi massa (w/w)%

Upaya pengembangan kawasan wisata Pantai Tongaci sebagai objek dan daya tarik wisata (ODTW) sudah dilakukan oleh pihak swasta, khususnya Yayasan Tukik Babel.. Tempat wisata