BAB III PEMBAHASAN MASALAH 3.1 Tahapan Pembuatan Website Global Metro Futsal
Pada bagian ini, akan dijelaskan analisis dan perancangan dari pembuatan situs global metro futsal dengan menggunakan Macromedia Dreamweaver,MySQL. Pada kesempatan ini, akan dibangun sebuah website yang dijalankan pada sebuah Internet Browser. Untuk membangun aplikasi tersebut, digunakan bahasa pemrograman PHP sebagai bahasa pemrograman utama, HTML sebagai pendukung desain dari aplikasi dan sistem database MySQL sebagai tempat penyimpanan dan pengambilan data. HTML merupakan sebuah bahasa pemograman standar dalam aplikasi web yang berbasiskan pada sisi client/ pengguna (client side), sehingga tidak diperlukan instalasi yang rumit. Untuk dapat menjalankan file HTML ini diperlukan sebuah progam penjelajah internet (Internet Browser). Internet Browser yang umum dipakai adalah Microsoft Internet Explorer atau Netscape. Hampir seluruh platform operating sistem yang ada menyediakan aplikasi Internet Browser. PHP merupakan bahasa pemograman berbasiskan pada sisi server (server side) yang artinya script yang telah di tulis akan sepenuhnya di jalankan pada server. MySQL merupakan server database, yang berfungsi melayani permintaan data dari query database yang diterima server MySQL. Proses pembangunan aplikasi situs global metro futsal terbagi dalam empat tahap utama. Tahap pertama adalah pendefinisian kebutuhan. Pada tahap ini penulis melakukan inventarisasi terhadap elemen apa saja yang dimasukan dalam aplikasi situs ini.
32
Tahap kedua adalah tahap perancangan. Pada tahap ini dilakukan perancangan antarmuka grafis untuk tampilan utama aplikasi situs ini. Pada tahap perancangan antarmuka ini menggunakan bantuan perangkat lunak editor situs sebagai alat utama. Tahap ketiga adalah tahap menampung semua elemen yang berada pada daftar kebutuhan yag ada pada tahap pertama dimasukan secara kode kedalam program. Semua fungsi pendukung aplikasi situs seperti akses sumber data (basisdata), pemeriksaan input admin, dan antarmuka grafis mengalami pengintegrasian kedalam sebuah rangkaian kode program yang utuh. Pada tahap keempat atau tahap terakhir, dilakukan sebuah pengujian skala kecil terhadap keseluruhan kode dengan menggunakan local web server (APACHE Webserver). Hasil uji ini akan menentukan bahwa aplikasi ini dapat dilanjutkan ketahap berikutnya atau harus di tulis ulang agar lolos tahap pengujian. Tahap pengujian akhir untuk aplikasi ini adalah dengan melakukan upload.
3.2 Pendefinisian Kebutuhan Aplikasi situs global metro futsal adalah sebuah aplikasi situs yang mempunyai beberapa syarat untuk dapat dijalankan. Aplikasi ini membutuhkan : 1. Dua buah format tampilan untuk tampilan utama. 2. Empat buah berkas untuk menampilkan Data lapangan 3. Satu buah berkas untuk pemesanan lapangan. 4. Satu buah berkas untuk mengupdate pemesanan 5. Satu buah berkas untuk login dan add_admin 6. Satu buah berkas untuk mengakses data dari MySQL. Aplikasi situs ini dirancang berdasarkan enam kebutuhan diatas. Daftar ini menjadi pegangan bagi penulis untuk melakukan tahap berikutnya yaitu perancangan antarmuka grafis. Pada akhir pendefinisian kebutuhan ini, penulis sudah mempunyai gambaran kasar tentang bentuk dan fitur-fitur yang ada pada aplikasi utuh di tahap akhir nanti.
33
Format tampilan utama dirancang denagan HTML.Inti utama dari aplikasi situs Global Metro Futsal ini menggunakan PHP script, dan pengolahan data pada basisdata menggunakan MySQL dengan bantuan PHPMyAdmin,MySQLAdmin. Editor situs yang digunakan adalah Macromedia Dreamweaver 8. Beberapa fasilitas dalam situs ini memerlukan database. Fasilatas yang memerlukan database adalah : 1. Pemesanan 2. Admin Basis data yang digunakan untuk menunjang fasilitas tersebut ada dua tabel, yaitu : 1. Tabel Pemesanan 2. Tabel Admin
3.2.1 Tabel Pemesanan Untuk fasilitas pemesanan digunakan tabel pemesanan, digunakan untuk menampung data dari pengisian pemesanan., masing-masing field sesuai dengan isian dari form pemesanan, yaitu sender dan testimonial. Sedangkan field idtestimonial dan approved datanya terisi secara otomatis saat pengisian berita. Tabel 3.1 Struktur Database Tabel Pemesanan Field
Type
id
integer(10), auto_increment
Kd_lapangan
varchar(3)
nama
varchar(45)
alamat
varchar(30)
No_tlp
Varchar(12)
Stuktur tabel pemesanan dibuat secara SQL dengan perintah: CREATE TABLE `Global`.`pemesanan` ( `id` INTEGER(10) UNSIGNED NOT NULL AUTO_INCREMENT,
34
`kd_lapangan` VARCHAR(3) NOT NULL DEFAULT '', `nama` VARCHAR(45) NOT NULL DEFAULT '', `alamat` varchar(30) NOT NULL DEFAULT '', `no_tlp` varchar (12) NOT NULL DEFAULT '', PRIMARY KEY(`idtestimonial`) ) ENGINE = InnoDB;
3.2.2 Tabel Admin Untuk fasilitas login admin digunakan tabel admin, digunakan untuk menampung isian dari form login dan pembuatan admin. Tabel ini mempunyai field kunci noid, dan masing-masing field sesuai dengan isian form login, yaitu field user_name untuk isian nama user_name, field password untuk isian password
Tabel 3.2 Struktur Database Tabel Admin Field
Tipe Data
Noid
int(11),Auto_increment
User_name varchar(10) Password
varchar(10)
Stuktur table berita dibuat secara SQL dengan perintah : CREATE TABLE `koffka`.`admin` ( `noid` INTEGER(11) UNSIGNED NOT NULL AUTO_INCREMENT, `user_name` VARCHAR(10) NOT NULL DEFAULT '', `password` VARCHAR(10) NOT NULL DEFAULT '', `name` VARCHAR(20) NOT NULL DEFAULT '', `alamat` VARCHAR(45) NOT NULL DEFAULT '', `no_telp` VARCHAR(11) NOT NULL DEFAULT '', PRIMARY KEY(`asd`)ENGINE = InnoDB;
35
3.2.3 Struktur Navigasi Pada saat pertama pengguna akan langsung dihadapkan pada halaman menu, kemudian pengguna dapat mengakses halaman – halaman yang ada pada menu pilihan. Menu tersebut adalah Home, About Us, Services, Testimonial, Contact Us , dan Login. khusus untuk menu admin diperlukan login untuk administator, jika administator berhasil melakukan login, maka administator akan diberikan halaman untuk add admin dan testimonial manajemen. Jenis yang dipakai adalah jenis
Lapangan3.Html
Lapangan2.html Lapangan1.ht
Pemesanan.php Daftar Lap.html
Home.html
Login.php
Login admin.html
composite.
Gambar 3.1 Struktur Navigasi
36
3.3 Perancangan Halaman Rancangan pada aplikasi situs ini menggunakan dasar berkas HTML untuk membuat tampilan grafis dan tata letak komponen bagian-bagiannya. Kemudian pada tahap selanjutnya mengetikan kode PHP sebagai inti aplikasi situs ini. Alat bantu pengolah citra MACROMEDIA DREAMWEAVER 8 digunakan untuk mengambar pada aplikasi situs ini. Pembuatan website ini memiliki beberapa halaman , untuk dapat mengakses ke halaman-halaman tersebut pengguna dapat mengakses langsung menu-menu website, diantaranya adalah Home, Daftar lapangan, pemesanan, dan Login. Rancangan muka aplikasi situs ini menggunakan dasar berkas HTML. 3.3.1 Tampilan halaman Website 1. Home.htm Index.htm adalah halaman depan dari semua halaman yang ada pada website. Halaman ini juga dapat disebut sebagai halaman pembuka, karena pada saat pertama website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lainnya. Halaman index.htm merupakan main atau home dari halaman-halaman web lainnya yang berada pada link index.htm tersebut.
Banner
Gambar
Button Link
Gambar
Hit Counter Gambar
Gambar
Almt.Persh
Gambar 3.2 Rancangan Halaman Index
37
2. Daftar Lapangan.html Pada halaman ini menjelaskan sepesifikasi dan fasilitas lapangan dan dibagi menjadi 3 (tiga) lapangan.Halaman ini mempunyai rancangan tampilan sebagai berikut :
Banner
Button Link Gambar
Daftar Lap
Almt.Pers Gambar 3.3 Rancangan Tampilan Daftar Lapangan 3. Pemesanan Halaman ini berfungsi sebagai penjelasan dari situs bagaimana melakukan pemesanan melalui situs ini dengan mengisi formulir pemesanan yang telah disediakan. Halaman ini mempunyai rancangan tampilan sebagai berikut : Banner
Button Link Gambar
Formulir Pendaftaran
Gambar
Almt Persh Gambar 3.4 Rancangan Tampilan Pemesanan
38
4. Login Admin Halaman ini berfungsi untuk menetapkan siapa saja yang punya wewenang untuk membuka database ini. Halaman ini mempunyai rancangan sebagai berikut :
Banner
Button Link Gambar
Gambar Hal. Login
Almt.Persh
Gambar 3.5 Tampilan Rancangan Login Admin 3.3.2
Menentukan Situs Yang Ingin Dibuat a. Buka program Dreamweaver 8 b. Pilih Dreanweaver site c. Dalam kotak dialog site Definition info dipilih dalam daftar Category d. Pada field Site Name,Ketik ami Nama situs memudahkan untuk mengidentifikasi dan memilih sebuah situs dari daftar situs-situs yang telah di buat. e. Klik icon folder disebelah kanan field Local Root Folder.pilihlah Folder Sites yang telah dibuat dan select serta folder image yang perlu ditentukan
39
Gambar 3. 6 Site Definition
f. Klik OK g. Klik Create ketika ditanya apakah akan membuat sebuah cache file untuk situs ini. Cache file adalah sebuah catatan file-file yang ada sehingga Dreamweaver dapay dengan mudah men-update link ketika memindahkan,merubah,atau menghapus sebuah file.
Jendela site menampilkan sebuah daftar yang berisi semua folder dan file-file didalam situs ini.. Daftar ini juga bertindak sebagai sebuah file manager, yang memperbolehkan Anda untuk mengcopy, paste, menghapus , memindahkan, dan membuka file seperti pada windows exporer.
40
Gambar 3.7 Jendela Site terbuka
h. Biarkan jendela Site dalam keaadan terbuka i. Klik jendela Document untuk membuatnya menjadi aktif. 3.3.3
Perancangan halaman Web Pembuatan tombol navigasi pada website Aplikasi Web Penyewaan Lapangan Futsal secara online dengan menggunakan Macromedia dreamweaver 8 a. Jalankan program Dreamweaver 8
Gambar 3.8 Tampilan program dreamweaver
41
b. Buatlah sebuah dokumen baru
Gambar 3.9 Tampilan new document
c. Ubah Page Properties dengan cara Klik Modify>Page Properties
Gambar 3.10 Tampilan Page Properties
42
d. Atur tampilan website dengan menggunakan layer dengan cara menekan tombol insert > layout object > layer.
Gambar 3.11 Insert Layer e. Tempatkan layer yang sudah di buat sesui tampilan web yang diinginkan dan atur ukurannya sesui kebutuhan.
Gambar 3.12 Tampilan Layer yang sudah diatur
f. Tambahkan gambar kedalam table dengan menekan tombol insert >image atau klik kanan >source file>ok
43
Gambar 3.13 Insert image
g. Tentukan ukuran gambar serta link yang dari gambar tersebut jika di butuhkan.
Gambar 3.14 Tampilah layer yang sudah di beri image
h. Lakukan langkah yang sama untuk layer – layer berikutnya i. Apabila semua halaman sudah dibuat convert layer menjadi table.
44
3.3.4
Membuat Daftar lapangan a) Buka program dreamweaver b) Aktifkan Insert Bar From. c) Klik sekali tombol from d) Pada text field action. ketikan daftar lapangan.html dengan method POST. e) Aktifkan insert Bar Table f) Klik Insert Bar Table g) Pada rowa ketikan 2 pada coulumns ketikan 2 dan pada border ketikan 0 h) Tekan tombol OK
Gambar 3.15 Insert Table
i) Pada baris pertama kolom pertama ketikan Lapangan 1 j) Pada baris pertama kolom kedua ketikan Lapangan 2 k) Pada baris kedua kolom pertama ketikan Lapangan 3 l) Setelah selesai anda anda copi ke halaman index.html m) Simpan file dan letakan pada director C:\xampp\htdocs\ami\daftar_lapangan.html
45
Gambar 3.16 Rancangan Daftar Lapangan
3.3.5
Membuat From Daftar isi Lapangan a) Buka Program dreanweaver b) Aktifkan Insert Bar From c) Klik Sekali tombol from d) Pada text field Action.ketikan Lapangan1.html dengan method POST. e) Aktifkan Insert Bar Table f) Klik Insert Bar Table g) Pada rows ketikan 2 dan pada coloumns ketikan 3 dan pada border ketikan 0 h) Tekan tombol OK i) Pada baris pertama kolom pertama ketikan KD_Lapangan j) Pada baris pertama kolom kedua ketikan Harga per jam k) Pada baris pertama kolom ketiga ketikan Fasilitas l) Pada baris kedua kolom seterusnya masukan data lapangan m) Atur tampilan website dengan menggunakan layer dengan cara menekan tombol insert > layout object > layer
46
n) Tambahkan ganbar kedalam table dengan menekan tombol insert image atau klik kanan >source file > ok o) Setelah selesai kopi ke halaman index.html p) Simpan File dan letakan pada director C:\xampp\htdocs\ami\Lapangan1.html q) Untuk membuat daftar isi lapangan selanjutnya lakukan langkah yang sama. r) Hasil tampilan akhir daftar isi lapangan
Gamabr 3.17 Rancangan daftar isi lapangan
3.3.6
Membuat From Input Pemesanan Dengan Dreamweaver a) Buka Program dreanweaver b) Aktifkan Insert Bar From c) Klik Sekali tombol from d) Pada text field Action.ketikan Lapangan1.html dengan method POST. e) Aktifkan Insert Bar Table f) Klik Insert Bar Table
47
g) Pada rows ketikan 4 dan pada coloumns ketikan 2 dan pada border ketikan 0 h) Tekan tombol OK i) Pada baris pertama kolom pertama ketikan KD_Lapangan j) Pada batris kedua kolom pertama ketikan NAMA k) Pada baris ketiga kolom pertama ketikan ALAMAT l) Pada baris keempat kolom pertama ketikan NO_TLP m) Klik sekali pada kolom kedua baris pertama n) Klik sekali Tombol text field yang letaknya berdekatan dengan tombil from o) Copy sebanyak 3 kali sehingga sekarang saya memiliki 5 text field dan letakan masing – masing pada baris dan kolom yang berbeda – beda p) Klik sekali Insert Bar Table q) Pada rows saya ketikan 1 dan pada kolom saya ketikan 2 dan pada border saya akan ketikan 0 setelah itu tekan OK r) Klik baris pertama kolom pertama setelah itu pilih menu insert > Form pilih button s) Klik baris pertama kolom kedua setelah itu pilih menu insrt > Form oilih button t) Pada button record, ketik kirim u) Pada label,ketik insert record v) Pada action, pilih submit form w) Copy tombol pertama sekali x) Pada button name, ketikan hapus y) Pada label, ketikan hapus z) Pada Action, pilih Reset form
48
Gambar 3.18 Rancangan Input Pemesanan
aa) Untuk memberi Background klik kanan > Page properties bb) Klik tombol browse pada file field background image dan masukan File gambar yang ingun dijadikan bakground cc) Tekan tombol OK jika sudah selesai dd) Simpan File dan letakan pada director C:\xampp\htdocs\ami\Pemesanan.php
3.3.7
Perancangan Halaman Login Admin Perancangan halaman loginmenggunakan element – element form, yang
digunakan untuk menginput masukan
49
Gambar 3.19 Rancangan halaman login
Cara memasukan form dan element – element terkait untuk melakukan login, berikut tata cara pembuatan form beserta elementnya, halaman login admin, panel menggunakan cara yang dijelaskan di perancangan halaman login
a. Dimulai dengan cara menjalankan macromedia dreamweaver 8 yang
sudah di jelaskan diatas, lalu pilih menu insert > form
untuk membuat form
b. Jika suda saatnya untuk membuat text field untuk menginput isian dengan cara memilih menu insert > Form > Text Field
50
Gambar 3.20 Menu Text Field
c. Buatlah tombol submit dengan cara memilih menu Insert > form > Button
3.3.8
Pengkodean Script Penunjang Dalam situs ini menggunakan beberapa script penunjang, setiap script
penunjang mempunyai kegunaan khusus. Diantaranya adalah script yang khusus berfungsi untuk menyimpan sebuah variabel ( konfigurasi umum ), script yang khusus mengakses database, script yang khusus untuk proses otentikasi, dan script untuk template.
3.3.9
Konfigurasi untuk mengakses database
Script untuk konfigurasi diberi nama koneksi1.php, script ini digunakan oleh script inti dan di Macromedia Dreamweaver 8 terdapat tools untuk membuat script tersebut. Isi lembar kerja koneksi1.php adalah kumpulan nama-nama variabel dan isi default variabel bersangkutan.
51
Berikut cara untuk membuat konfigurasi database dengan mengunakan tools dari macromedia dreamweaver 8 : a. dimulai dengan menjalankan dreamweaver seperti yang sudah dijelaskan di atas b. Pilih tab application di dalam dreamweaver c. Lalu klik menu
lalu pilih menu MySQL Connection.
Gambar 3.21 Menu MySQL Connection
d. Isi field-field tersebut sesuai dengan settingan MySQL
Gambar 3.22 Tampilan field-field isian MySQL Connection
52
3.3.10 Konfigurasi script untuk melakukan otentikasi Script ini mengunakan script koneksi1.php untuk melakukan koneksi ke dalam database,script ini digunakan dalam Login.php yang diperuntukan untuk melakukan login Berikut penggalan script otentikasi yang dipergunakan dan dibuat dalam macromedia dreamweaver 8 :
$loginFormAction = $_SERVER['PHP_SELF']; if (isset($_GET['accesscheck'])) { $_SESSION['PrevUrl'] = $_GET['accesscheck']; } if (isset($_POST['textfield'])) { $loginUsername=$_POST['textfield']; $password=$_POST['textfield2']; $MM_fldUserAuthorization = ""; $MM_redirectLoginSuccess = "admin/admin_home.php"; $MM_redirectLoginFailed = "wrong_login.html"; $MM_redirecttoReferrer = false; mysql_select_db($database_koneksi1, $koneksi1); $LoginRS__query=sprintf("SELECT user_name, password FROM admin WHERE user_name='%s' AND password='%s'",
53
3.3.11 Script untuk melakukan proses insert data Script ini digunakan untuk menginput data dari user . Berikut penggalan script yang dimaksud yang dibuat dengan bantuan macromedia dreamweaver 8:
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { $insertSQL = sprintf("INSERT INTO testimonial (idtestimonial, sender, test, approved) VALUES (%s, %s, %s, %s)",
3.3.12 Script untuk melakukan proses update data Script ini dipergunakan untuk update data.Untuk mengubah item digunakan perintah SQL UPDATE. Berbeda dengan menambah item, didalam proses update terlebih dahulu melakukan query data dengan perintah select, lalu mengambil data dengan perintah mysql_fetch_array() yang hasilnya berupa data array. Baru setelah itu dilakukan SQL UPDATE klausa yang biasa digunkan adalah klausa WHERE berdasarkan field kunci.Berikut penggalan script proses update yang dibuat oleh macromedia dreamweaver 8 :
$updateSQL = sprintf("UPDATE testimonial SET sender=%s, test=%s, approved=%s WHERE idtestimonial=%s", GetSQLValueString($_POST['textfield'], "text"), GetSQLValueString($_POST['textfield2'], "text"), GetSQLValueString($_POST['textfield3'], "text"), GetSQLValueString($_POST['textfield4'], "int"));
54
3.4 Publikasi Website Setelah halaman Web telah siap, penulis mempublikasikannya ke dalam format WWW agar hasil yang dibuat dapat dipergunakan oleh setiap pengguna jasa internet. Namun sebelumnya ada beberapa persyaratan yang harus di penuhi, antara lain :
a) Hyperlink harus sudah terhubung dan tidak rusak. b) Tampilan halaman Web sudah sesuai keinginan. c) Mengetahui letak direktori pada server Web beserta provider. d) Pastikan besar file tidak melewati batas anjuran dari provider. Dalam melakukan Upload hal yang perlu diperhatikan adalah masalah webhost apakah webhost yang di miliki mendukung program atau aplikasi yang di gunakan. Dalam hal ini penulis menggunakan webhost yang mendukung aplikasi yang penulis gunakan yaitu PHP dan MySQL. Webhost tersebut penulis dapatkan secara gratis, webhsot tersebut bisa di dapatkan di WWW.LF3H.COM . Dan cara menguploadnya bisa menggunakan file manager atau FTP. Dalam hal ini penulis melakukan penguploadan menggunakan FTP. Dengan cara membuka Program FTP tersebut lalu penulis memilih connect setelah itu penulis mamasukan nama situs penulis, nama webhostnya, dan password yang penulis pakai. Kemudaian Browse file yang akan di upload.
55
