PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA MENGGUNAKAN FRAMEWORK CODEIGNITER.

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER
TUGAS AKHIR

Disusun Oleh :
SEPTYAN NURDIANSYAH
(0935010045)

PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
2013

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER

TUGAS AKHIR


Diajukan Untuk Memenuhi Per syaratan Dalam
Memperoleh Gelar Sarjana Komputer
Program Studi Sistem Informasi

Oleh :
Septyan Nurdiansyah
0935010045

PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
2013

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

Pembimbing I
Pembimbing II


: PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER
: Moh. Ir wan Afandi, ST, MSc
: Eka Dyar Wahyuni, S.Kom

ABSTRAK
Futsal adalah olahraga yang semakin digemari dari tahun ke tahun. Oleh
karena itu banyak pengusaha yang memanfaatkan peluang tersebut untuk membangun
sebuah lapangan futsal. Dan pihak lapangan juga sering membuat sebuah kompetisi
yang digunakan untuk mempromosikan lapangannya. Tetapi, masih banyak pihak
lapangan yang melakukan pencatatan data lapangan dan kompetisi dengan cara manual
dengan menggunakan kertas. Hal tersebut tidak efisien dalam pencarian data dan
berpotensi atas kehilangan data.
Berdasarkan dari permasalahan tersebut, dibuatlah “Portal Web Futsal Dengan
Fitur Sosial Media Menggunakan Framework CodeIgniter” yang dibangun
menggunakan bahasa pemrograman PHP dengan framework CodeIgniter dan Mysql
sebagai database-nya.
Dengan adanya Website ini, proses penjadwalan lapangan dan pencatatan data
kompetisi semakin mudah dilakukan. Website ini juga dapat berfungsi sebagai sebuah

media interaksi antar pemain futsal.

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER

J udul

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER

SKRIPSI

Disusun Oleh :
Kata kunci: Por tal futsal, Sosial media futsal, CodeIgniter .

SEPTYAN NURDIANSYAH
NPM : 0935010045
SEPTYAN NURDIANSYAH
NPM:0935010045


Dosen Pembimbing :
Mohamad Ir wan Afandi, ST, Msc
Eka Dyar Wahyuni, S.Kom

2013

PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
2013

TUGAS AKHIR
PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER

Disusun Oleh:
SEPTYAN NURDIANSYAH
NPM : 0935010045


Telah dipertahankan dihadapan dan diterima oleh Tim Penguji Skripsi
J urusan Sistem Informasi Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional “Veteran” J awa Timur
Pada tanggal 17 Mei 2013
Pembimbing :

Tim Penguji :

1.

1.

Mohamad Irwan Afandi, ST, MSc
NIP/NPT. 376070702201

Prof . Dr. Ir. H. Akhmad Fauzi, MMT
NIP/NPT. 196511091991031002

2.


2.

Eka Dyar Wahyuni, S.Kom
NIP/NPT. 384121303561

Nur Cahyo Wibowo, S.Kom, M.Kom
NIP/NPT. 379030401971
3.
Mohamad Irwan Afandi, ST, MSc
NIP/NPT. 376070702201

Mengetahui,
Dekan Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional “Veteran” J awa Timur

Ir. Sutiyono, MT
NIP/NPT. 196007131987031001

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.


LEMBAR PENGESAHAN

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA
MENGGUNAKAN FRAMEWORK CODEIGNITER

Disusun Oleh:
SEPTYAN NURDIANSYAH
NPM : 0935010045

Telah disetujui mengikuti Ujian Negara Lisan
Pada tanggal 17 Mei 2013
Menyetujui,

Dosen Pembimbing 1

Dosen Pembimbing 2

Mohamad Irwan Afandi, ST, MSc
NIP/NPT. 376070702201


Eka Dyar Wahyuni, S.Kom
NIP/NPT. 384121303561

Mengetahui,
Ketua Program Studi Sistem Informasi
Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional “Veteran” J awa Timur

Nur Cahyo Wibowo, S.Kom, M.Kom
NIP/NPT. 379030401971

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

LEMBAR PERSETUJ UAN

Mahasiswa dengan nama dan NPM yang tertera dibawah ini :
Nama


: Septyan Nurdiansyah

NPM

: 0935010045

Jurusan

: Sistem Informasi

Dengan ini telah melaksanakan Tugas Akhir dan telah disetujui untuk mengikuti Ujian
Negara Lisan priode bulan Mei tahun akademik 2012/2013.
1. SKRIPSI
Judul : Portal Web Futsal Dengan Fitur Sosial Media Menggunakan Framework
CodeIgniter
2. PRAKTEK KERJA LAPANGAN
Judul : Sharing Knowledge Berbasis Web Dengan Menggunakan PHP di PT. JASA
MARGA (Persero) Surabaya
Menyetujui,
Dosen Pembimbing I


Dosen Pembimbing II

Dosen Pembimbing PKL

(Moh. Irwan Afandi, ST, MSc)
NIP/NPT. 276070740220

( Eka Dyar Wahyuni, S.kom)
NIP/NPT. 384121303561

(Doddy Ridwandono, S.Kom)
NIP/NPT. 378050702181

Menyetujui,
Ketua Program Studi Sistem Informasi

Nur Cahyo Wibowo, S.Kom, M.Kom
NIP/NPT. 37903040197


Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

KATA PENGANTAR
Dengan memanjatkan puji syukur atas kehadirat Allah SWT karena
dengan rahmat, taufiq, serta hidayah-Nya sehingga penulis dapat menyelesaikan
Tugas Akhir dan Laporan Tugas Akhir yang berjudul “Portal Web Futsal Dengan
Fitur Sosial Media Menggunakan Framework CodeIgniter”.
Tujuan utama dari penulisan Tugas Akhir ini adalah untuk memenuhi
persyaratan menempuh ujian sarjana pada Fakultas Teknologi Industri Program
Studi Sistem Informasi universitas Pembangunan Nasional “Veteran” Jawa
Timur.
Akhirul kalam, semoga Tugas Akhir ini dapat memberikan manfaat bagi
semua pihak yang berkepentingan dan penulis juga mengucapkan terima kasih
kepada semua pihak yang telah membantu penyelesaian Tugas Akhir ini. Semoga
Allah membalasnya dengan balasan sebaik-baiknya.
Penulis sebagai manusia biasa pasti mempunyai keterbatasan dan banyak
sekali kekurangan, terutama dalam pembuatan laporan ini. Untuk itu penulis
sangat membutuhkan kritik dan saran yang membangun dalam memperbaiki
penulisan laporan ini.

Surabaya, 12 April 2013

Penulis

ii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

DAFTAR ISI
ABSTRAK ................................................................................................. i
KATA PENGANTAR ................................................................................ ii
UCAPAN TERIMAKASIH ........................................................................ iii
DAFTAR ISI .............................................................................................. v
DAFTAR GAMBAR .................................................................................. ix
DAFTAR TABEL ...................................................................................... xvi
BAB I PENDAHULUAN
1.1 Latar Belakang ............................................................................. 1
1.2 Perumusan Masalah ..................................................................... 3
1.3 Batasan Masalah .......................................................................... 4
1.4 Tujuan ......................................................................................... 5
1.5 Manfaat........................................................................................ 5
1.6 Metode Penelitian ........................................................................ 6
1.7 Sistematika Penulisan................................................................... 7
BAB II TINJAUAN PUSTAKA
2.1 Futsal ........................................................................................... 9
2.1.1 Sejarah Futsal................................................................... 9
2.1.2 Peraturan Futsal ............................................................... 10
2.2 Sosial Media ................................................................................ 14
2.3 Website ........................................................................................ 15
2.3.1 Jenis Aplikasi Website ...................................................... 15
2.3.2 Pengertian Web Portal ...................................................... 17
2.3.3 Keamanan Aplikasi Website ............................................. 17

v
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

2.4 PHP ............................................................................................. 18
2.4.1 Pengenalan PHP ............................................................... 19
2.5 HTML (Hyper Text Markup Language) ....................................... 21
2.6 CSS (Cascade Style Sheet) ........................................................... 24
2.6.1 Keuntungan Penggunaan CSS .......................................... 24
2.6.2 Struktur CSS .................................................................... 24
2.7 JavaScript .................................................................................... 25
2.7.1 Menjalankan JavaScript ................................................... 25
2.8 JQuery ......................................................................................... 26
2.8.1 Fullcalendar ..................................................................... 27
2.9 CodeIgniter .................................................................................. 28
2.9.1 keunggulan CodeIgniter ................................................... 29
2.9.2 Diagram Alir Aplikasi ..................................................... 29
2.9.3 Petunjuk Instalasi ............................................................. 30
2.10 Database .................................................................................... 31
2.10.1 Keuntungan Sistem Database ......................................... 32
2.11 MySQL ...................................................................................... 32
2.12 DFD (Data Flow Diagram) ........................................................ 33
2.12.1 Komponen DFD ............................................................. 34
2.12.1.1 Komponen Terminator/ Entitas Luar .................. 34
2.12.1.2 Komponen Proses .............................................. 35
2.12.1.3 Komponen Data Store ........................................ 36
2.12.1.4 Komponen Data Flow/ Alur Data....................... 37
2.12.2 Diagram Konteks ........................................................... 37

vi
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

2.12.3 Diagram Level 1 ............................................................ 38
2.13 MVC (Model View Controller)................................................... 38
2.13.1 Model............................................................................. 39
2.13.2 View ............................................................................... 39
2.13.3 Controller ...................................................................... 40
BAB III ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis ........................................................................................ 42
3.1.1 Pengguna dan Hak Akses ................................................. 43
3.1.1.1 Pengguna Umum.................................................. 44
3.1.1.2 Pengelola Lapangan ............................................. 45
3.2 Perancangan Sistem ..................................................................... 45
3.2.1 Perancangan Proses .......................................................... 45
3.2.2 Perancangan Database ..................................................... 48
3.2.2.1 CDM (Conceptual Data Model) ........................... 71
3.2.2.2 PDM (Physical Data Model) ................................ 73
3.2.3 Perancangan Antar Muka ................................................. 75
BAB IV IMPLEMENTASI SISTEM
4.1 Lingkungan Implementasi ............................................................ 81
4.1.1 Spesifikasi Sistem ............................................................ 81
4.2 Implementasi Antarmuka ............................................................. 82
4.2.1 Halaman Index ................................................................. 82
4.2.2 Halaman Profil Pengguna Umum ..................................... 87
4.2.3 Halaman Profil Pengguna Pengelola Lapangan ................ 97
4.2.4 Halaman Tim ................................................................... 104

vii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.2.5 Halaman Kompetisi.......................................................... 115
BAB V UJI COBA
5.1 Lingkungan Uji Coba ................................................................... 123
5.2 Uji Coba Fungsi ........................................................................... 123
5.2.1 Registrasi Pengguna Umum ............................................. 123
5.2.2 Registrasi Pengguna Pengelola Lapangan ......................... 125
5.2.3 Login Pengguna ............................................................... 126
5.2.4 Membuat Status ............................................................... 127
5.2.5 Membuat Komentar Status ............................................... 128
5.2.6 Upload Foto ..................................................................... 129
5.2.7 Membuat Tim .................................................................. 130
5.2.8 Menulis Pesan .................................................................. 131
5.2.9 Membuat Kompetisi ......................................................... 132
5.2.10 Membuat Pengumuman Tim .......................................... 133
5.2.11 Membuat Acara Tim ...................................................... 134
5.2.12 Membuat Pengumuman Lapangan.................................. 136
5.2.13 Membuat Lapangan........................................................ 137
5.2.14 Membuat Pertandingan................................................... 139
5.2.15 Membuat Riwayat Pertandingan ..................................... 140
5.2.16 Memesan Lapangan ....................................................... 141
BAB VI PENUTUP
5.1 Kesimpulan .................................................................................. 142
5.2 Saran............................................................................................ 142
DAFTAR PUSTAKA ................................................................................. 144

viii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

Judul : Portal Web Futsal Dengan Fitur Sosial Media Menggunakan Framework
CodeIgniter
Penyusun : Septyan Nurdiansyah
Dosen Pembimbing I : Moh. Irwan Afandi, ST, M.Sc.
Dosen Pembimbing II : Eka Dyar Wahyuni, S.Kom.

ABSTRAK
Futsal adalah olahraga yang semakin digemari dari tahun ke tahun. Oleh
karena itu banyak pengusaha yang memanfaatkan peluang tersebut untuk
membangun sebuah lapangan futsal. Dan pihak lapangan juga sering membuat
sebuah kompetisi yang digunakan untuk mempromosikan lapangannya. Tetapi,
masih banyak pihak lapangan yang melakukan pencatatan data lapangan dan
kompetisi dengan cara manual dengan menggunakan kertas. Hal tersebut tidak
efisien dalam pencarian data dan berpotensi atas kehilangan data.
Berdasarkan dari permasalahan tersebut, dibuatlah “Portal Web Futsal
Dengan Fitur Sosial Media Menggunakan Framework CodeIgniter” yang
dibangun menggunakan bahasa pemrograman PHP dengan framework
CodeIgniter dan Mysql sebagai database-nya.
Dengan adanya Website ini, proses penjadwalan lapangan dan pencatatan
data kompetisi semakin mudah dilakukan. Website ini juga dapat berfungsi
sebagai sebuah media interaksi antar pemain futsal.
Kata kunci: Portal futsal, Sosial media futsal, CodeIgniter.

i
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

BAB I
PENDAHULUAN
Pada bab I ini dibahas tentang latar belakang, perumusan masalah, batasan
masalah, tujuan, manfaat, metode penelitihan dan sistematika penulisan dalam
Laporan Tugas Akhir ini.
1.1 Latar Belakang
Di zaman sekarang ini masyarakat telah sadar akan pentingnya olahraga,
Terutama dalam olahraga futsal. Futsal pertama kali dimainkan di Montevideo
Uruguay pada tahun 1930. Kata futsal berasal dari kata Fubol sala dari Spanyol,
lalu menyebar ke Amerika selatan dan Brasil dengan istilah Futebol de salao yang
artinya adalah sepak bola ruangan (FIFA, 2004). Peraturan skor futsal sama
dengan peraturan umum pada sepak bola. Yang membedakan antara futsal dengan
sepak bola adalah jumlah pemain dan luas lapangannya. Sepak bola dimainkan
oleh 11 pemain dalam 1 tim. Dan dengan lapangan yang lebih kecil dari sepak
bola, futsal hanya dimainkan oleh 5 orang pemain dalam 1 tim.

Gambar 1.1 Google Trend Futsal
1
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

2

Dilihat dari Google Trends, jumlah penelusuran website berkata kunci
futsal sangatlah tinggi dari tahun ke tahun. Ini menandakan peminat olahraga
futsal yang semakin tinggi.
Dengan peminat yang semakin tinggi, maka kebutuhan akan lapangan
futsal juga semakin tinggi. Dan hal itu juga memberi peluang bisnis untuk
membuka usaha penyewaan lapangan futsal.
Pada saat ini terdapat suatu teknologi yang disebut dengan internet.
Internet dapat menghubungkan semua orang dimanapun mereka berada dengan
hanya mengakses sebuah web. Internet juga dapat diakses 24 jam tanpa henti,
sehingga peran internet dalam era teknologi informasi sekarang ini semakin besar.
Dan oleh karena itu, peran internet sekarang ini mulai berubah dari mesin pencari
data menjadi wadah bisnis dengan aplikasi yang dinamakan website.
Dengan adanya internet, memungkinkan semua aktifitas dapat dibantu
dengan internet. Sehingga setiap kegiatan dapat tercatat rapi dan terpublikasikan
secara online. Oleh karena itu, internet juga dapat dijadikan sebagai media untuk
mempromosikan suatu produk. Hal ini dikarenakan internet mempunyai segmen
pasar yang luas yang menjangkau semua orang diseluruh dunia.
Dalam pelaksanaan aktifitas olahraga futsal, tentunya ada beberapa
aktifitas yang dapat dibantu dengan media internet dan website sebagai
aplikasinya. Yang pertama adalah proses penyewaan lapangan futsal. Pada
pelaksanaannya, masih banyak pengelola lapangan yang melakukan pencatatan
secara manual. Dan untuk proses pencarian data lapangan yang kosong, pihak
lapangan mencari data dengan cara melihat catatan-catatan yang telah dibuat

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

3

sebelumnya. Tentunya hal ini kurang efisien karena dalam pencariannya akan
memakan waktu dan dalam pencatatannya akan membutuhkan biaya kertas
sebagai medianya. Yang kedua adalah pada proses pencatatan kompetisi. Dengan
pencatatan kompetisi yang tidak terpublikasi secara online, peserta kompetisi
harus datang ke lokasi kompetisi untuk melihat jadwal pertandingan.
Untuk itu, dalam Tugas Akhir ini, dibuatlah “Portal Web Futsal Dengan
Fitur Sosial Media Menggunakan Framework CodeIgniter”, dimana website ini
dapat digunakan sebagai alat bantu untuk mencatat penjadwalan. Contohnya
adalah penjadwalan lapangan futsal. Dengan mempublikasikan jadwal lapangan
futsal secara online, diharapkan semua orang dapat mengakses jadwal dan dengan
mudah melakukan pemesanan lapangan futsal. Tidak hanya itu, dengan website
yang terpublikasikan secara online juga dapat menjadi media promosi sehingga
diharapkan dapat menambah jumlah pelanggan. Dalam website ini juga berfungsi
sebagai media untuk membantu pencatatan data kompetisi, sehingga memudahkan
peserta kompetisi dan semua orang untuk mengetahui jadwal pertandingan. Dan
dalam website ini juga dapat digunakan sebagai media bertemunya dan
berinteraksi antara para pemain-pemain futsal diseluruh dunia.
1.2 Perumusan Masalah
Berdasarkan Latar belakang yang telah diuraikan diatas, yang menjadi
permasalahan yang dibahas pada Tugas Akhir ini adalah bagaimana membuat
website portal futsal untuk membantu pencatatan semua kegiatan yang
berhubungan dengan olahraga futsal, yang dapat digunakan oleh pemain-pemain
futsal dan pengelola lapangan. Kegiatan-kegiatan tersebut antara lain terdiri dari

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4

pemesanan lapangan, pembuatan kompetisi, serta pembuatan tim dan pembuatan
suatu media sosial untuk pemain-pemain futsal.
1.3 Batasan Masalah
Dalam Pembuatan Tugas Akhir ini, mempunyai batasan masalah sebagai
berikut:
1.

Website tidak meliputi transaksi pembayaran pemesanan lapangan dan
pembayaran kompetisi.

2.

Foto yang di-upload harus berekstensi jpg, gif, atau png.

3.

Batas maksimal upload foto adalah 5 mb.

4.

Fitur sosial media yang dibuat meliputi:
a) Menambah teman,
b) Saling kirim pesan,
c) Menulis status,
d) Mengomentari status,
e) Upload foto,
f) Membuat tim,
g) Membuat pengumuman tim, dan
h) Mengomentari pengumuman tim.

5.

Tim yang dapat memesan lapangan adalah tim yang telah menjadi member
aktif dengan batas pemesanan yang telah diisi oleh pengelola lapangan.

6.

Jika pengguna menjadi anggota tim, pengguna tidak dapat melakukan
pemesanan lapangan atas nama tim. Dan jika pengguna menjadi ketua tim,
pengguna dapat melakukan pemesanan lapangan atas nama tim.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

5

7.

Pengelola lapangan tidak dapat melakukan pemesanan lapangan sendiri,
kecuali telah membuat kompetisi.

8.

Sistem kompetisi yang dibuat hanya menggunakan sistem gugur.

9.

Tim yang dapat mengikuti kompetisi adalah tim yang mempunyai 12 orang
sebagai pemain utama.

10. Dalam membuat pertandingan, ronde kompetisi di-input-kan manual oleh
pengguna. Dan dalam peng-input-annya, harus urut berdasarkan alur
pertandingan.
11. Jika jumlah tim yang mengikuti kompetisi bernilai ganjil, maka dapat
ditandingkan dengan tim dumy yang telah ter-generate otomatis ketika
membuat kompetisi.
12. Riwayat pertandingan yang diinputkan hanya terdiri dari: goal, pelanggaran,
kartu merah, dan kartu kuning.
1.4 Tujuan
Adapun tujuan dari pembuatan Tugas Akhir ini adalah:
1.

Membuat website portal futsal sebagai media pembantu pencatatan semua
kegiatan aktifitas olahraga futsal,

2.

Menyediakan tempat saling berinteraksi antar pemain futsal.

1.5 Manfaat
Manfaat dari pembuatan Tugas Akhir ini adalah:
1.

Mempermudah pemesanan lapangan.

2.

Membantu mempermudah pencarian lapangan yang kosong.

3.

Membantu mencari lawan latihan.

4.

Membantu pencatatan data kompetisi yang dapat dilihat oleh semua orang.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

6

5.

Mempermudah sebuah tim untuk membuat jadwal acara yang dapat dilihat
oleh semua anggotanya.

1.6 Metode Penelitian
Langkah-langkah pengumpulan data sebagai dasar penyusunan Tugas
Akhir adalah sebagai berikut:
1. Studi literatur
Merupakan usaha untuk lebih memudahkan dalam melengkapi data dan
memecahkan masalah yang merupakan sumber referensi bagi penulis
dalam mengambil langkah pengamatan dan melengkapi data.
2. Analisa sistem
Menganalisa masalah-masalah yang akan disajikan dan mengumpulkan
data atau informasi. Yang juga merupakan aktivitas dalam melakukan
pengamatan dan analisa terhadap kondisi sebenarnya di lapangan
kemudian akan dicari solusinya.
3. Perancangan dan implementasi
Membuat perancangan sistem dengan kebutuhan yang sesuai, dan
mengimplementasikan website yang dibuat dengan data.
4. Uji coba
Melakukan uji coba sistem secara keseluruhan apakah terjadi kesalahan
dan ketidak akuratan proses.
5. Evaluasi
Mengevaluasi website yang telah dibuat dengan meninjau kembali
kekurangan-kekurangan website dan memperbaiki website yang dibuat
agar sesuai dengan kebutuhan.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

7

1.7 Sistematika Penulisan
Laporan Tugas Akhir ini terdiri dari atas 5 bab dengan rincian sebagai
berikut:
BAB I

: PENDAHULUAN
Bab ini menjelaskan tentang deskripsi umum Tugas Akhir
yang meliputi latar belakang, rumusan masalah, batasan
masalah, tujuan, manfaat, dan sistematika penulisan.

BAB II

: TINJ AUAN PUSTAKA
bab ini menjelaskan tentang teori-teori penunjang, yaitu
sejarah dan peraturan olahraga futsal, pengertian website,
sosial media, PHP, HTML, CSS, JavaScript, Jquery,
framework CodeIgniter, database, MySQL, DFD, dan
MVC.

BAB III

: ANALISIS DAN PERANCANGAN SISTEM
Bab ini membahas desain sistem dengan menggunakan
Data Flow Diagram(DFD) dan desain database yang
terdiri dari desain Conceptual Data Model (CDM) dan
Physical Data Model (PDM).

BAB IV

: IMPLEMENTASI SISTEM
Bab ini menjelaskan tentang implementasi dari analisa
sistem ke dalam sebuah bahasa pemrograman PHP
sehingga terbentuk suatu website yang dikehendaki.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

8

BAB V

: UJ I COBA
Bab ini berisi penjelasan lingkungan uji coba website, dan
pelaksanaan ujicoba website.

BAB VI

: PENUTUP
Bab ini berisi tentang kesimpulan yang dapat diambil dari
permasalahan dalam Tugas Akhir ini, serta saran saran bagi
pengembangan lebih lanjut dari website yang telah dibuat.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

BAB II
TINJ AUAN PUSTAKA
Pada bab II ini dibahas beberapa teori dasar untuk menunjang
penyelesaian Laporan Tugas Akhir ini.
2.1 Futsal
Futsal adalah permainan bola yang dimainkan oleh dua tim, yang masingmasing beranggotakan lima orang. Tujuannya adalah memasukkan bola ke
gawang lawan, dengan memanipulasi bola dengan kaki. Selain lima pemain
utama, setiap regu juga diizinkan memiliki pemain cadangan. Tidak seperti
permainan sepak bola dalam ruangan lainnya, lapangan futsal dibatasi garis,
bukan net atau papan. Futsal turut juga dikenali dengan berbagai nama lain. Istilah
"futsal" adalah istilah internasionalnya, berasal dari kata Spanyol atau Portugis,
futbol dan sala.
2.1.1 Sejarah Futsal
Futsal dipopulerkan di Montevideo, Uruguay pada tahun 1930, oleh Juan
Carlos Ceriani. Keunikan futsal mendapat perhatian di seluruh Amerika Selatan,
terutamanya di Brasil. Ketrampilan yang dikembangkan dalam permainan ini
dapat dilihat dalam gaya terkenal dunia yang diperlihatkan pemain-pemain Brasil
di luar ruangan, pada lapangan berukuran biasa. Pele, bintang terkenal Brasil,
contohnya, mengembangkan bakatnya di futsal. Sementara Brasil terus menjadi
pusat futsal dunia, permainan ini sekarang dimainkan di bawah perlindungan

9
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

10

Fédération Internationale de Football Association di seluruh dunia, dari Eropa
hingga Amerika Tengah dan Amerika Utara serta Afrika, Asia, dan Oseania.
Pertandingan internasional pertama diadakan pada tahun 1965, Paraguay
menjuarai Piala Amerika Selatan pertama. Enam perebutan Piala Amerika Selatan
berikutnya diselenggarakan hingga tahun 1979, dan semua gelaran juara disapu
habis Brasil. Brasil meneruskan dominasinya dengan meraih Piala Pan Amerika
pertama tahun 1980 dan memenangkannya lagi pada perebutan berikutnya tahun
pd 1984.
Kejuaraan Dunia Futsal pertama diadakan atas bantuan FIFUSA (sebelum
anggota-anggotanya bergabung dengan FIFA pada tahun 1989) di Sao Paulo,
Brasil, tahun 1982, berakhir dengan Brasil di posisi pertama. Brasil mengulangi
kemenangannya di Kejuaraan Dunia kedua tahun 1985 di Spanyol, tetapi
menderita kekalahan dari Paraguay dalam Kejuaraan Dunia ketiga tahun 1988 di
Australia.
2.1.2 Peraturan Futsal
a) Luas lapangan
1) Ukuran: panjang 25-43 m x lebar 15-25 m
2) Garis batas: garis selebar 8 cm, yakni garis sentuh di sisi, garis gawang di
ujung-ujung, dan garis melintang tengah lapangan; 3 m lingkaran tengah; tak
ada tembok penghalang atau papan
3) Daerah penalti: busur berukuran 6 m dari masing-masing tiang gawang
4) Titik penalti: 6 m dari titik tengah garis gawang
5) Titik penalti kedua: 10 m dari titik tengah garis gawang

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

11

6) Zona pergantian: daerah 5 m (5 m dari garis tengah lapangan) pada sisi tribun
dari pelemparan
7) Gawang: tinggi 2 m x lebar 3 m
8) Permukaan daerah pelemparan: halus, rata, dan tak abrasive

Gambar 2.1 Lapangan Futsal

Gambar 2.2 Ukuran Garis Lapangan Futsal

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

12

Gambar 2.3 Ukuran Gawang dan Batas Penjaga Gawang Futsal

Gambar 2.4 Tinggi dan Lebar Gawang Futsal

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

13

Gambar 2.5 Area Official Futsal
b) Bola
1) Ukuran: 4
2) Keliling: 62-64 cm
3) Berat: 0,4 - 0,44 kg
4) Lambungan: 55-65 cm pada pantulan pertama
5) Bahan: kulit atau bahan yang cocok lainnya (yaitu bahan tak berbahaya)
c) J umlah pemain (per tim)
1) Jumlah pemain maksimal untuk memulai pertandingan: 5, salah satunya
penjaga gawang
2) Jumlah pemain minimal untuk mengakhiri pertandingan: 2 (tidak termasuk
cedera)
3) Jumlah pemain cadangan maksimal: 7
4) Jumlah wasit: 2

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

14

5) Jumlah hakim garis: 0
6) Batas jumlah pergantian pemain: tak terbatas
7) Metode pergantian: "pergantian melayang" (semua pemain kecuali penjaga
gawang boleh memasuki dan meninggalkan lapangan kapan saja; pergantian
penjaga gawang hanya dapat dilakukan jika bola tak sedang dimainkan dan
dengan persetujuan wasit)
8) Dan wasit pun tidak boleh menginjak arena lapangan , hanya boleh di luar

garis lapangan saja , terkecuali jika ada pelanggaran-pelanggaran yang harus
memasuki lapangan
d) Lama permainan
1) Lama normal: 2x20 menit
2) Lama istiharat: 10 menit
3) Lama perpanjangan waktu: 2x5 menit (bila hasil masih imbang setelah 2x20
menit waktu normal)
4) Ada adu penalti (maksimal 5 gol) jika jumlah gol kedua tim seri saat
perpanjangan waktu selesai
5) Time-out: 1 per tim per babak; tak ada dalam waktu tambahan
6) Waktu pergantian babak: maksimal 10 menit
2.2 Sosial Media
Sosial

media adalah

fase perubahan dimana

bagaimana orang

menemukan, membaca dan membagi-bagi berita, informasi dan konten kepada
orang lain. Dan sosial media juga berarti perpaduan sosiologi dengan teknologi
yang mengubah monolog (one to many) menjadi dialog (many to many) dan

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

15

demokrasi informasi yang mengubah orang-orang dari pembaca konten menjadi
penerbit konten. Sosial media telah menjadi sangat popular karena memberikan
kesempatan orang-orang untuk terhubung dengan dunia online dalam bentuk
hubungan personal, politik dan kegiatan bisnis.
2.3 Website
Website adalah kumpulan dari halaman-halaman situs yang biasanya
terangkum dalam sebuah domain atau subdomain yang tempatnya berada di dalam
Word Wide Web (WWW) di internet. Sebua web page adalah dokumen yang
ditulis dalam format HTML (Hyper Text Markup Language), yang hamper selalu
bias diakses melalui HTTP, yaitu protocol yang menyampaikan informasi dari
server website untuk ditampilkan kepada para pemakai melalui web browser.
Semua publikasi dari website-website tersebut dapat membentuk sebuah jaringan
informasi yang sangat besar. Menurut Laudon dan Laudon (2002, hal 17),
“Website adalah keseluruhan dari pemeliharaan halaman www oleh organisasi
atau individual”.
2.3.1 J enis Aplikasi Website
Melihat perkembangan aplikasi web yang sedang berkembang saat ini,
dapat di klasifikasikan menjadi beberapa bentuk atau kelompok. Berikut ini
penjelasan beberapa kelompok aplikasi web dan contohnya:
-

Web bisnis yaitu aplikasi web yang didalamnya terdapat proses bisnis seperti
jual beli, sewa menyewa, penggunaan jasa, lelang dan sebagainya. Contoh
situs yang menggunakan aplikasi web bisnis seperti bhineka.com, ebay.com,
dan lain-lain.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

16

-

Web berita dan informasi yaitu aplikasi web yang menyediakan konten
informasi berbayar maupun gratis. Contoh situs yang menggunakan aplikasi
web

berita

dan

informasi

:

kompas.com,

detik.com,

kaskus.us,

yellowpages.co.id, tokobagus.com.
-

Web profil yaitu aplikasi web yang mendeskripsikan tentang profil suatu
perusahaan lembaga ataupun orang personal. Aplikasi web ini biasanya
digunakan untuk memperkenalkan profil perusahaan, lembaga atau orang
personal kepada umum. Contoh aplikasi web profil seperti jogjakota.go.id,
blogspot.com, dan lain-lain.

-

Web services yaitu aplikasi web yang menyediakan layanan pengolahan data
dan sebagainya. Perbedaan umum aplikasi web service dan aplikasi web lain
pada umumnya adalah aplikasi web service tidak memiliki antarmuka, namun
dapat diakses melalui alamat internet. Contoh aplikasi web services seperti
aws.amazon.com, konakart.com, dan lain-lain.

-

Web social networking yaitu aplikasi web yang memberikan fasilitas
pertemanan, teman berkumpul dan dapat juga menjadi wadah suatu
kelompok. Aplikasi web social networking saat ini menjadi tren dunia
internet. Contoh aplikasi web social networking seperti facebook.com,
twitter.com, myspace.com, dan lain-lain.

-

Web banking yaitu aplikasi web yang didalamnya terdapat proses transaksi
keuangan pada perbankan secara umum, seperti transfer dana, pembayaran,
pembelian dan lainnya. Contoh aplikasi web banking seperti klickbca.com,
bankmandiri.co.id, bni.co.id, dan lain-lain.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

17

-

Web search engine optimize yaitu aplikasi web yang didalamnya terdapat
proses pencarian pada internet. Contoh aplikasi web SEO seperti google.com,
yahoo.com, bing.com, dan lain-lain

2.3.2 Pengertian Web Portal
Web portal dibagi menjadi dua kelompok, yaitu Portal Horizontal atau
HEPs (Horizontal Enterprise Portals, juga disebut megaportal), dan Portal
Vertikal atau VEPs (Vertical Enterprise Portals).
1) Portal Horizontal
Portal horizontal adalah sebuah situs Web publik yang mencoba untuk
memberikan penggunanya dengan semua layanan yang mereka butuhkan.
Portal horizontal memberikan jenis informasi yang beragam dalam web yang
sama. Portal horizontal hampir selalu menyertakan iklan yang membayar
untuk portal, dan tujuan mereka adalah untuk menarik sebanyak mungkin
pengguna.
2) Portal Vertikal
Portal Vertikal adalah sebuah portal yang memberikan informasi spesifik
tentang organisasi dengan cara user-centric. Portal Vertikal membutuhkan
autentifikasi pengguna dengan cara login. Ketika pengguna login, maka akan
ditampilkan halaman yang berbeda pada setiap penggunanya.
2.3.3 Keamanan Aplikasi Website
Perkembangan aplikasi web semakin banyak mendominasi sisi bisnis yang
menyediakan transaksi online, penyimpanan data secara online dan lainnya.
Kemudahan yang ditawarkan media internet adalah kebebasan dalam mengakses

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

18

jaringan secara global, yang terkadang menimbulkan rasa penasaran bagi sebagian
kalangan untuk mencoba apakah aplikasi web dapat digunakan tanpa melalui
proses yang disediakan oleh aplikasi, seperti melewatkan proses login,
melewatkan validasi sistem pembayaran, mengakses data secara illegal dan
lainnya. Untuk mencegah terjadinya percobaan tersebut beberapa teknologi
keamanan internet dikembangkan, berikut ini penjelasan beberapa teknologi
tersebut:
-

Firewall adalah alat atau kumpulan alat yang digunakan untuk mengatur izin
masuk dan keluarnya suatu transmisi paket data pada jaringan komputer.

-

SSL/TLS atau Secure Socket Layer/ Transport Layer Security adalah
protocol kriptografi yang menyediakan keamanan komunikasi pada internet.
SSL/TLS melakukan enkripsi atau penyandian data pada setiap pengiriman
data.

-

HTTPS atau HTTP Secure adalah kombinasi antara protocol HTTP dan
SSL/TLS, HTTPS umumnya digunakan sebagai protocol umum pada proses
pembayaran transaksi pada web.

-

Certificate Authority (CA) adalah sertifikat digital yang digunakan sebagai
penanda keabsahan suatu alamat pada jaringan internet.

2.4 PHP
Pada tahun 1994 seorang programmer bernama Ramus Lerdorf awalnya
membuat

sebuah

halaman

website

pribadi,

tujuannya

adalah

untuk

mempertahankan halaman website pribadi tersebut sekaligus membangun
halaman web yang dinamis. PHP pada awalnya diperkenalkan sebagai singkatan

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

19

dari Personal Home Page.PHP pertama ditulis menggunakan bahasa Perl (Perl
Script), kemudian ditulis ulang menggunakan bahasa pemrograman C CGI-BIN
(Common Gateway Interface-Binary) yang ditujukan untuk mengembangkan
halaman website yang mendukung formulir dan penyimpanan data. Pada tahun
1995 PHP Tool 1.10 dirilis untuk umum, kemudian pengembangannya
dilanjutkan oleh Andi Gutmans dan Zeev Suraski. Perusahaan bernama Zend
kemudian melanjutkan pengembangan PHP dan merilis PHP versi 5 terakhit pada
saat ini.
2.4.1 Pengenalan PHP
PHP adalah pemrograman interpreter yaitu proses penerjemahan baris
kode sumber menjadi kode mesin yang dimengerti computer secara langsung pada
saat baris kode dijalankan. PHP disebut sebagai pemrograman Server Side
Programming, hal ini dikarenakan seluruh prosesnya dijalankan pada server. PHP
adalah suatu bahasa dengan hak cipta terbuka atau dikenal dengan istilah Open
Source, yaitu pengguna dapat mengembangkan kode-kode fungsi PHP sesuai
dengan kebutuhannya.
Pemrograman PHP dapat ditulis dalam dua bentuk yaitu penulisan baris
kode PHP pada file tunggal dan penulisan kode PHP pada halaman html
(embedded). Kedua cara penulisan tersebut tidak memiliki perbedaan, hanya
menjadi kebiasaan gaya penulisan dari programmer. Berikut contoh penulisan
kode program PHP :
Singlefile_php.php

embedded_php.html





Dibawah ini adalah tulisan dari PHP



Untuk penulisan kode PHP pada HTML diperlukan tambahan konfigurasi
pada web server agar dapat berjalan. Konfigurasi ini bertujuan untuk
mendaftarkan ekstensi .html agar dapat dikenali dengan Apache Web Server dan
diproses seperti halnya file PHP dengan ekstensi .php. Caranya adalah sebagai
berikut:
-

Buka file httpd.conf.

-

Cari bagian pada file.

-

Cari barisan AddType. Pada bagian terakhir dari Addtype application/xhttp-php .php3 kemudian tambahkan baris berikut
AddType application/x-httpd-php .html.

-

Simpan file. Kemudian restart services Apache

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

21

2.5 HTML (Hyper Text Markup Language)
HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa
untuk pertukaran dokumen web. Struktur dokumen HTML terdiri tag pembuka
dan tag penutup. HTML versi 1.0 dibangun oleh W3C, dan terus mengalami
perkembangan. Sampai saat ini HTML terakhir adalah versi 5.0. struktur
dokumen HTML sebagai berikut:






Struktur diatas adalah satu kesatuan yang harus ada dalam setiap dokumen
HTML. Dokumen HTML terdiri dari komponen yaitu tag, elemen, dan atribut.
Berikut adalah penjelasan dari masing-masing komponen tersebut.
Tag adalah tanda awal < dan tanda akhir > yang digunakan sebagai
pengapit suatu elemen. Tag pada elemen pembuka diawali dengan tanda < dan
diakhiri dengan tanda >. Sedangkan untuk elemen penutup diawali dengan tanda
< dan / kemudian diakhiri dengan tanda >. Untuk penulisan tag elemen tunggal
cukup menuliskan tanda < dan sebelum tanda > ditambahkan tanda ?. berikut
contoh penulisan Tag:




Tag Elemen pembuka HEAD
Tag Elemen penutup HEAD
Tag Elemen tunggal

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

22

Elemen adalah nama penanda yang diapit oleh tag yang memiliki fungsi
dan tujuan tertentu pada dokumen HTML. Elemen dapat memiliki elemen anak
dan juga nilai. Elemen anak adalah suatu elemen yang berada di dalam elemen
pembuka dan elemen penutup induknya. Nilai yang dimaksud adalah suatu teks
atau karakter yang berada di antara elemen pembuka dan elemen penutup.
Berikut contoh elemen:



Elemen HEAD
Elemen anak dari elemen HEAD
Judul Dokumen Nilai dari elemen TITLE



Atribut adalah properti elemen yang digunakan untuk mengkhususkan
suatu elemen. Elemen dapat memiliki atribut yang berbeda pada tiap masingmasingnya. Pendefinisian nilai atribut hanya dapat dilakukan pada elemen
pembuka. Untuk elemen dari tag yang memiliki atribut sama dengan induknya,
namun nilai atribut tidak didefinisikan secara implisit maka nilai atribut elemen
tersebut sama dengan nilai atribut pada tag induk atau isitilah lainnya inherit.
Sifat inherit tersebut tidak berlaku untuk atribut identitas, seperti atribut id dan
name.
Elemen body dengan atribut id dan
Class

Atribut class pada elemen P secara
otomatis bernilai sama dengan
induknya.
Membuat HTML sederhana



Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

23

Elemen body dengan atribut id dan
Class

Atribut class pada elemen P dengan
atribut class, yang berbeda dengan
induknya.
Membuat HTML sederhana


Aturan penulisan dokumen HTML:
-

Setiap nama tag atau elemen pembuka diawali dengan tanda < dan
diakhiri dengan tanda >.

-

Setiap nama tag atau elemen penutup diawali dengan tanda < dan tanda /
kemudian tanda >.

-

Untuk tag atau elemen yang berdiri sendiri, cukup dengan menuliskan
tanda < dan diakhiri tag atau elemen ditambahkan tanda / sebelum tanda
>.

-

Penulisan nama tag atau elemen atau atribut dapat menggunakan huruf
besar maupun huruf kecil (tidak case sensitive).

-

Penulisan nilai pada atribut diawali dengna tanda “ dan diakhiri tanda “.

-

Urutan struktu doumen setelah tag sebaiknya dimulai dengan
kemudian , jika tag mendahului tag
secatra aturan tidak mengubah atau menyalahi struktur dokumen HTML,
namun disarankan agar urutan disesuaikan seperti diatas agar urutan
disesuaikan seperti di atas agar mudah dalam membaca dokumen HTML.

-

Penulisan komentar pada dokumen HTML diawali tanda .

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

24

2.6 CSS (Cascade Style Sheet)
CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para
web designer untuk mengatur style element yang ada dalam halaman web mereka,
mulai dari format text, sampai pada memformat layout. Tujuan dari penggunaan
CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World
Wide Web Consortium), sebuah konsorsium untuk standarisasi web, menyusun
draf proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya
pada pertengahan tahun 1998, W3C mengembangkan CSS yang diperbarui untuk
kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai
pada tahun 200, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih
terus diperbarui lagi.
2.6.1 Keuntungan Penggunaan CSS
Dengan menggunakan CSS, akan mudah untuk mengatur style elemen
dalam website. Sebagai contoh, misalnya untuk mengatur style elemen heading,
dapat dengan cara menuliskan properti dari elemen heading tersebut sekali saja.
Jika tidak menggunakan CSS, maka perlu dituliskan style pada setiap elemen
heading yang ada.
2.6.2 Struktur CSS
Style pada CSS memiliki struktur sebagai berikut:

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

25

Gambar 2.6 Struktur CSS
Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan.
Selector dapat berupa id elemen atau nama class. Bagian declaration
menerangkan style yang akan dibuat. Bagian ini terdiri dari property dan value.
Property dapat diisi dengan jenis, warna, ukuran, perataan margin dan lain-lain,
sedangkan value diisi dengan nilai dari propertinya, misalnya red untuk warna
dan lain-lain. Setiap akhir penulisan property dan value harus diakhiri dengan titik
koma (semicolon). Tanda ini juga digunakan sebagai pemisah antara satu properti
dengan properti lain.
2.7 J avaScript
JavaScript adalah bahasa script yang berdasar pada objek yang
memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai
pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window,
frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu
mempunyai properti yang saling berhubungan dengannya dan masing-masing
memiliki nama, lokasi, warna nilai dan atribut lain.
2.7.1 Menjalankan J avaScript
Untuk dapat mempelajari pemrograman Java Script, ada dua piranti yang
diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

26

(word processor) yang menghasilkan file dalam format ASCII murni. Text editor
yang dapat digunakan antara lain Notepad,Wordpad atau menggunakan Ultraedit
text editor. Selain itu browser web yang digunakan harus mendukung Java Script,
contohnya menggunakan Internet Explorer, Opera, FireFox atau browser lain
pendukung JavaScript. Kode program JavaScript dapat dituliskan langsung pada
file HTML dengan menggunakan tag kontainer . Dengan kata lain
tidak perlu menuliskan program JavaScript pada file terpisah. Ingat bahwa yang
dimaksud dengan tag kontainer adalah tag yang diawali dengan
dan diakhiri dengan . Contoh.



Tag kontainer mempunyai dua atribut tetapi yang harus diisikan hanya
satu atribut yaitu Language. Isi atribut language dengan “JavaScript”. Hal ini
digunakan untuk memberitahukan pada browser bahwa yang akan ditulis adalah
JavaScript. Contoh penulisan script

Gambar 2.7 Contoh Penulisan J avaScript
2.8 J Query
JQuery adalah salah satu JavaScript framework terbaik saat ini. Jquery
dikembangkan oleh John Resig pada tahun 2006 di BarCamp NYC. Pada awal
perkembangannya, JQuery pertama dibuat untuk meringkas penggunaan CSS
Selector dalam suatu pustaka fungsi. JQuery memiliki ciri khas pada penggunaan

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

27

perintahnya, prefix untuk JQuery dengan tanda $ kemudian dilanjutkan dengan
fungsi atau perintah.
2.8.1 Fullcalendar
Fullcalendar adalah salah satu dari plugin Jquery yang menghasilkan
kalender lengkap, dan dengan fitur drag & drop. Fullcalendar menggunakan
AJAX untuk mengambil acara untuk setiap bulan dan mudah diatur sesuai dengan
kebutuhan.

Gambar 2.8 Contoh Fullcalendar
Penggunaan dasar fullcalendar :
-

Langkah pertama dalam penambahan kalender pada halaman website adalah
harus mempunyai JavaScript dan CSS. Pastikan sudah memasukkan
Fullcalendar CSS dan juga JavaScript Fullcalendar dan Jquery di bagian
dari halaman website.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

28

Gambar 2.9 Penulisan Plugin dan CSS Fullcalendar
Jika menginginkan untuk dapat melakukan penyeretan atau pengubahan
ukuran diperlukan file tambahan yaitu Jquery UI.
-

Setelah itu, Tulis kode JavaScript untuk menginisialisasi kalender. Kode
dibawah ini harus dijalankan setelah halaman diinisialisasi. Cara terbaik
adalah dengan $(document) Jquery, seperti berikut:

Gambar 2.10 Penulisan Inisialisasi Fullcalendar
Kode di

Dokumen yang terkait

Pembangunan Aplikasi Pendataan Absensi Siswa Berbasis Web Dengan Menggunakan Framework Codeigniter

10 101 44

Pembangunan Sistem Informasi Kost Berbasis Web Dengan Framework CodeIgniter Pembangunan Sistem Informasi Kost Berbasis Web Dengan Framework CodeIgniter.

0 3 17

PENGEMBANGAN SISTEM INFORMASI SKRIPSI BERBASIS WEB DENGAN FRAMEWORK CODEIGNITER PENGEMBANGAN SISTEM INFORMASI SKRIPSI BERBASIS WEB DENGAN FRAMEWORK CODEIGNITER.

0 3 11

PENGEMBANGAN SISTEM PEMESANAN LUKISAN BERBASIS WEB MENGGUNAKAN FRAMEWORK CODEIGNITER DAN JQUERY PENGEMBANGAN SISTEM PEMESANAN LUKISAN BERBASIS WEB MENGGUNAKAN FRAMEWORK CODEIGNITER DAN JQUERY DENGAN PEMBANGKIT EFEK LUKISAN MENGGUNAKAN IMAGEMAGICK API.

0 2 19

SISTEM INFORMASI PELAYANAN SALON KECANTIKAN BERBASIS WEB DENGAN MENGGUNAKAN FRAMEWORK CODEIGNITER.

58 331 102

PERANCANGAN E-LEARNING BERBASIS WEB MENGGUNAKAN FRAMEWORK CODEIGNITER

0 1 6

PENGEMBANGAN MODUL UKM WEB PORTAL CROWDFUNDING DENGAN METODE PROTOTYPE DAN FRAMEWORK CODEIGNITER DEVELOPMENT OF CROWDFUNDING PORTAL WEB UKM MODUL USING PROTOTYPE AND CODEIGNITER FRAMEWORK METHODOLOGY HARPANDI WIBOWO1, YULI ADAM PRASETYO,S.T.,M.T.2, FAISHA

0 0 11

PENGEMBANGAN MODUL INVESTOR WEB PORTAL CROWDFUNDING DENGAN METODE PROTOTYPE DAN FRAMEWORK CODEIGNITER DEVELOPMENT OF CROWDFUNDING PORTAL WEB INVESTOR MODUL USING PROTOTYPE AND CODEIGNITER FRAMEWORK METHODOLOGY ARIS SETYO NUGROHO1, YULI ADAM PRASETYO,S.T.,

0 0 10

SISTEM INFORMASI PELAYANAN SALON KECANTIKAN BERBASIS WEB DENGAN MENGGUNAKAN FRAMEWORK CODEIGNITER

2 6 23

PORTAL WEB FUTSAL DENGAN FITUR SOSIAL MEDIA MENGGUNAKAN FRAMEWORK CODEIGNITER

0 0 20