Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web

125  12 

Loading.... (view fulltext now)

Loading....

Loading....

Loading....

Loading....

Teks penuh

(1)

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

(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

(3)

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

(4)

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

(5)

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

(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

(7)

Nama Tabel : Data_iuran

Fungsi : Untuk menginput data iuran

Tabel 3.3 Tabel Data Iuran

Nama Field Tipe Data Ukuran

September Varchar 20

Oktober 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

(9)

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)
(12)

Gambar 3.6 Flochart Halaman Login Member

(13)
(14)
(15)

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

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

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

(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

(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

(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

(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

(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

Header

Beranda Download fil

Data Iuran

Logout

(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

(29)

Gambar 3.23 Tampilan Halaman Data Iuran Member

3.3.16 Desain Halaman Logout

Halaman logout ini halaman untuk keluar dari halaman member. Beranda Download

fil

Data Iuran

Logout

Footer

Data Iuran Anggota

Menu

Ketentuan Anggota Baru

(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

(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

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

(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

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

(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

Header

Home

Input Data

Lihat Data

Akun

Data Anggota

Footer

Logout

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)

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

(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

(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

(43)

Gambar 4.3 Tampilan Halaman Sejarah

4.2.1.4 Halaman Visi Misi

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

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.

(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

(48)

Gambar 4.9 Tampilan Halaman Utama Member

4.2.2.2 Halaman Daftar Anggota Aktif member

(49)

Gambar 4.10 Tampilan HalamaDaftar Anggota Aktif

4.2.2.3 Halaman Sanksi-sanksi Member

(50)

Gambar 4.11 Tampilan Halaman Sanksi-sanksi Member

4.2.2.4 Halaman Aturan Pertandingan Member

(51)

Gambar 4.12 Tampilan Halaman Aturan Pertandingan

4.2.2.5 Halaman Ketentuan Anggota Baru Member

(52)

Gambar 4.13 Tampilan Halaman Ketentuan Anggota Baru Member

4.2.2.6 Halaman Dowload File Member

(53)

Gambar 4.14 Tampilan Halaman Download File Member

4.2.2.7 Halaman Data Iuran Member

(54)

Gambar 4.15.1 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota

(55)

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

(56)

Gambar 4.17 Tampilan Halaman Home Admin

4.2.3.2 Halaman Input Data Iuran Admin

(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

(59)

Gambar 4.20 Tampilan Halaman Input Data Anggota Admin

4.2.3.5 Halaman Lihat Data Anggota Admin

(60)

Gambar 4.21 Tampilan Halaman Lihat Data Anggota Admin

4.2.3.6 Halaman Lihat Data Iuran

(61)

Gambar 4.22 Tampilan Halaman Data Iuran

4.2.3.7 Halaman Lihat Data Peringkat

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

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

(64)

Gambar 4.26 Tampilan Halaman Ganti Password Admin

4.2.3.10 Halaman Logout Admin

(65)

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.

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

(67)

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.

(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

(69)

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

(70)

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

(71)

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

(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

(73)

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

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

(75)

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

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

(77)

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.

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

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

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

(81)

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

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

(83)

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

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

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

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

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 :

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

(89)

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)

(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

(91)

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

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

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

(95)

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

(97)

1. Halaman Utama Dreamweaver 8

Gambar 2.6.3 Halaman Utama Dreamweaver 8

Keterangan :

1. Toolbar Dokumen

(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

(99)

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.

(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

(101)

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.

(102)

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.

(103)

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.

(104)

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.

(105)

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.

(106)

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.

(107)

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 :

(108)

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

(109)

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

(110)

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

(111)

BERBASIS WEB

ABSTRAK

(112)

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

(113)

USU BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

MUHAMMAD AGUS TRI MUNANDAR

(114)

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

(115)

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

(116)

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.

(117)

BERBASIS WEB

ABSTRAK

(118)

Halaman

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

(119)

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

(120)

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

(121)

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

(122)

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

(123)

Nomor Judul Halaman Tabel

(124)

Nomor Judul

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

(125)

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

Figur

Gambar 3.5 Flochart Halaman Login Admin
Gambar 3 5 Flochart Halaman Login Admin . View in document p.11
Gambar  3.13 Tampilan Halaman Prestasi
Gambar 3 13 Tampilan Halaman Prestasi . View in document p.19
Gambar  3.14 Tampilan Halaman Kegiatan
Gambar 3 14 Tampilan Halaman Kegiatan . View in document p.20
Gambar 4.3 Tampilan Halaman Sejarah
Gambar 4 3 Tampilan Halaman Sejarah . View in document p.43
Gambar 4.5 Tampilan Halaman Prestasi
Gambar 4 5 Tampilan Halaman Prestasi . View in document p.44
Gambar 4.4  Tampilan Halaman About
Gambar 4 4 Tampilan Halaman About . View in document p.44
Gambar 4.6 Tampilan Halaman Kegiatan
Gambar 4 6 Tampilan Halaman Kegiatan . View in document p.45
Gambar 4.7 Tampilan Halaman Peringkat
Gambar 4 7 Tampilan Halaman Peringkat . View in document p.46
Gambar 4.8 Tampilan Halaman Menu Member
Gambar 4 8 Tampilan Halaman Menu Member . View in document p.47
Gambar 4.9 Tampilan Halaman Utama Member
Gambar 4 9 Tampilan Halaman Utama Member . View in document p.48
Gambar 4.10 Tampilan HalamaDaftar Anggota Aktif
Gambar 4 10 Tampilan HalamaDaftar Anggota Aktif . View in document p.49
Gambar 4.11 Tampilan Halaman Sanksi-sanksi Member
Gambar 4 11 Tampilan Halaman Sanksi sanksi Member . View in document p.50
Gambar 4.12 Tampilan Halaman Aturan Pertandingan
Gambar 4 12 Tampilan Halaman Aturan Pertandingan . View in document p.51
Gambar 4.13 Tampilan Halaman Ketentuan Anggota Baru Member
Gambar 4 13 Tampilan Halaman Ketentuan Anggota Baru Member . View in document p.52
Gambar 4.14 Tampilan Halaman Download File Member
Gambar 4 14 Tampilan Halaman Download File Member . View in document p.53
Gambar 4.15.1 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota
Gambar 4 15 1 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota . View in document p.54
Gambar 4.15.2 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota
Gambar 4 15 2 Tampilan Halaman Data Pembayaran Iuran Wajib Anggota . View in document p.54
Gambar 4.16 Tampilan Halaman Logout
Gambar 4 16 Tampilan Halaman Logout . View in document p.55
Gambar 4.17 Tampilan Halaman Home Admin
Gambar 4 17 Tampilan Halaman Home Admin . View in document p.56
Gambar 4.18 Tampilan Halaman Input Data Iuran Admin
Gambar 4 18 Tampilan Halaman Input Data Iuran Admin . View in document p.57
Gambar 4.19 Tampilan Halaman Upload Data Anggota Admin
Gambar 4 19 Tampilan Halaman Upload Data Anggota Admin . View in document p.58
Gambar 4.20 Tampilan Halaman Input Data Anggota Admin
Gambar 4 20 Tampilan Halaman Input Data Anggota Admin . View in document p.59
Gambar 4.21 Tampilan Halaman Lihat Data Anggota Admin
Gambar 4 21 Tampilan Halaman Lihat Data Anggota Admin . View in document p.60
Gambar 4.22 Tampilan Halaman Data Iuran
Gambar 4 22 Tampilan Halaman Data Iuran . View in document p.61
Gambar 4.23 Tampilan Halaman Lihat Data Peringkat
Gambar 4 23 Tampilan Halaman Lihat Data Peringkat . View in document p.62
Gambar 4.24 Tampilan Halaman Profil Admin
Gambar 4 24 Tampilan Halaman Profil Admin . View in document p.62
Gambar 4.25 Tampilan Halaman Edit Profil Admin Anggota
Gambar 4 25 Tampilan Halaman Edit Profil Admin Anggota . View in document p.63
Gambar 4.26 Tampilan Halaman Ganti Password Admin
Gambar 4 26 Tampilan Halaman Ganti Password Admin . View in document p.64
Gambar 4.27 Tampilan Halaman Logout Admin
Gambar 4 27 Tampilan Halaman Logout Admin . View in document p.64
Gambar 2.5.5 simbol-simbol DFD
Gambar 2 5 5 simbol simbol DFD . View in document p.89

Referensi

Memperbarui...

Lainnya : Perancangan Sistem Inormasi UKM Tenis Meja USU Berbasis Web Desain Sistem Desain Basis Data Database Desain Halaman Utama Desain Halaman About Desain Halaman Sejarah Desain Halaman Visi Misi Desain Halaman Prestasi Desain Halaman Kegiatan Desain Halaman Peringkat Desain Halaman Member Desain Halaman Menu Member Desain Halaman Registrasi Member Desain Halaman Utama Member Desain Halaman Menu Anggota Baru Desain Halaman Aturan Pertandingan Desain Halaman Sanksi – sanksi Desain Halaman Daftar Anggota Aktif Desain Halaman Download File Desain Halaman Data Iuran Desain Halaman Logout Halaman utama Halaman About Halaman Sejarah Halaman Visi Misi Halaman Prestasi Halaman Kegiatan Halaman Utama Member Halaman Daftar Anggota Aktif member Halaman Sanksi-sanksi Member Halaman Aturan Pertandingan Member Halaman Ketentuan Anggota Baru Member Halaman Home Admin Halaman Input Data Iuran Admin Halaman Upload Data Anggota Admin Halaman Input Data Peringkat Admin Halaman Lihat Data Anggota Admin Halaman Lihat Data Iuran Halaman Lihat Data Peringkat Halaman Profil Admin Halaman Edit Profil Admin Halaman Ganti Password Admin Halaman Logout Admin Analisis Sistem Implementasi Sistem Kesimpulan Sejarah Website Pengertian Website Browser Pengertian Data Pengolahan Data Pengertian Sistem Pengertian Informasi Pengertian Sistem Informasi Pengertian Basis Data Sejarah PHP Pengertian PHP Penggabungan Sript PHP dan HTML Kelebihan dan Kelemahan PHP Fungsi PHP dan MySQL Sejarah MySQL Pengertian DBMS MySQL Perintah SQL Pengertian Data Pengertian Database Perancangan Database Contex Diagram Data Flow Diagram DFD Entity Relationship Diagram ERD Pengertian Macromedia Dreamweaver Macromedia Dreameaver 8 Saran Open a Recent Item Create New Create From Samples Tab Common Tab Layout Tab Form Tab Text Tab HTML Tab Application Tab Flash elements Sublime Text Latar Belakang Masalah Identifikasi Masalah Batasan Masalah Tujuan Manfaat