4.1 Perencanaan dan Perancangan website
Ketika ingin merancang suatu situs maka akan diperlukan suatu persiapan yang cukup baik, perencanaan yang baik, serta mempunyai tujuan yang jelas. Termasuk elemen-elemen apa saja yang membentuk situs tersebut. Maka terlebih dahulu harus dipikirkan bagaimana bentuk tampilannya agar kelihatan lebih menarik, dan link-link apa saja yang akan dirancang serta informasi apa saja yang akan disajikan dalam sebuah website. Dalam perancangan website ini lebih ditujukan pada informasi yang berhubungan tentang organisasi suatu jaringan alumni.
Selain persiapan dan perencanaan yang telah diuraikan, juga diperlu dilakukan identifikasi awal antara lain:
a. Situs apa yang ingin dibuat?
b. Siapa saja pengunjung yang diharapkan berkunjung ke situs tersebut? c. Apa saja aktivitas yang dapat mereka lakukan dalam situs?
24
Dengan menjawab pertanyaan-pertanyaan di atas, akan semakin memperjelas dan mempermudah dalam membangun situs karena dari situlah nantinya akan terbentuk kata kunci untuk membuat dan mengembangkan situs lebih lanjut.
Berkenaan dengan situs yang akan dibangun, maka jawaban untuk pertanyaan di atas sebagai berikut:
a. Situs yang akan dibuat adalah situs organisasi jaringan alumni sekolah, dalam hal ini adalah organisasi FORSIKAMUS 5 Medan, yang menyediakan informasi-informasi mengenai organisasi tersebut.
b. Pengunjungnya adalah anggota pengurus organisasi FORSIKAMUS 5 Medan, siswa-siswi dan SMAN 5 Medan, masyarakat awam yang ingin mengetahui informasi seputar organisasi FORSIKAMUS 5 Medan.
c. Aktivitas yang akan dijumpai di dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai organisasi FORSIKAMUS 5 Medan, mengisi buku tamu dan membuat pesan dan kesan terhadap organisasi tersebut.
d. Target yang akan dicapai dari situs tersebut adalah pengunjung mendapatkan informasi tentang organisasi FORSIKAMUS 5 Medan dan pengetahuan seputar masalah organisasi tersebut.
Kemudian langkah selanjutnya adalah membuat outline atau garis besar dari situs tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi atau flowchart (bagan alir) situs tersebut. Flowchart merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman per halaman, biasanya berbentuk pohon yang bercabang-cabang.
Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Di samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML-nya, terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana
flowchart dalam membangun situs ini dapat dilihat pada gambar di bawah ini:
Gambar 4.1 Flowchart rancangan aplikasi web (situs)
4.2 Data Flow Diagram (DFD)
Data Flow Diagram (DFD) adalah gambaran sistem secara logika. Gambaran ini tidak tergantung pada perangkat keras, lunak, struktur data atau organisasi. Pada tahap analisa, penanganan notasi simbol lingkaran dan anak panah mewakili/menggambarkan arus data dalam perancangan sistem sangat membantu
Index
Profil Buku
Tamu
Link Artikel Berita Activities Alumni
26
sekali didalam komunikasi dengan pemakaian sistem menggunakan notasi-notasi ini untuk menggambarkan arus dari data sistem.
4.3 Diagram Level Konteks
Dalam perancangan sistem ini penulis mencoba untuk memberikan gambaran mengenai alur arus data dari sistem ini. Adapun rancangan DFD pada sistem ini adalah sebagai berikut :
- Data Pengunjung - Informasi Situs
- Data Alumni - Info Berita
- Berita - Data Alumni
-Laporan Data Alumni
Gambar 4.2 DFD Level Konteks
Admin User Alumni
Ketua Organisasi
4.3.1 Diagram Level 0 -berita - data alumni - data pengunjung admin berita alumni -informasi bukutamu - berita -data pengunjung
-data alumni - data alumni -berita
-data admin Gambar 4.3 DFD Level 0 Ketua Organisasi Admin Pembuatan Laporan Input Data Alumni User F3 F4 F1 F2
28
4.4 Struktur Database
Sebelum membangun sebuah web dinamis, maka diperlukan pembuatan database. Pada tahap ini dipersiapkan tempat untuk menampung data di server, data teresebut nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik penambahan, pengeditan, penghapusan, dan menampilkan isi database ke halaman
web. Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL.
Adapun database yang dibuat oleh penulis adalah database forsi dengan tabel-tabel sebagai berikut:
4.1 Tabel bukutamu Field Jenis nama varchar(30) alamat Varchar(100) email Varchar(30) telepon Char(20) pesan Varchar(1000) 4.2 Tabel alumni Field Jenis id Int(5) nama Varchar(30) email Varchar(50) alamat Varchar(100) telepon Varchar(30) handphone Varchar(30) tahun tamat Varchar(10) pekerjaan Varchar(50)
4.3 Tabel admin Field Jenis Username Varchar(30) Password Varchar(40) 4.4 Tabel berita Field Jenis id Int(5) Tanggal Varchar(10) Judul Varchar(50) Isi_berita Text 4.5 Kamus Data
1. Tabel admin = { username + password }
2. Tabel alumni = { no + nama + email + alamat + telepon + handphone + tahun_tamat + pekerjaan }
3. Tabel berita = { no + tanggal + judul + isi_berita }
4. Tabel bukutamu = { tanggal + jam + nama + alamat + email + telepon + pesan}
4.6 Algoritma
Algoritma adalah urutan langkah-langkah berhingga untuk memecahkan masalah logika atau matematika. Adapun algoritma yang akan dibahas antara lain yaitu:
30
Berfungsi menampilkan tampilan utama website FORSIKAMUS 5 Medan, dengan menu pilihan antara lain : Profil, Buku Tamu, Link, Artikel, Berita, Activities, Alumni, Galeri, Administrator.
1. Algoritma Profil
Langkah 1 : Jika Klik sub menu Sejarah maka akan tampil halaman sejarah dari organisasi.
Langkah 2 : Jika Klik sub menu Visi & Misi maka akan tampil halaman visi dan misi organisasi.
Langkah 3 : Jika Klik sub menu Struktur maka akan tampil halaman struktur organisasi.
2. Algoritma Buku Tamu
Langkah 1 : Jika Klik sub menu Isi Buku Tamu maka lakukan pengisian buku tamu, jika data selesai diinput maka klik tombol kirim untuk melakukan penyimpanan data, sedangkan untuk membatalkan klik tombol reset.
Langkah 2 : Jika Klik sub menu Lihat Bukutamu maka akan terlihat data yang sudah tersimpan.
3. Algoritma Link
Langkah 1 : Klik menu Link
4. Algoritma Artikel
Langkah 1 : Klik menu Artikel
Langkah 2 : Maka akan menampilkan halaman artikel yang dapat dipilih sesuai dengan judul yang tersedia.
5. Algoritma Berita
Langkah 1 : Klik menu Berita
Langkah 2 : Maka akan menampilkan beberapa judul berita terbaru. Langkah 3 : Klik salah satu judul yang sesuai.
Langkah 4 : Menampilkan keseluruhan isi berita.
6. Algoritma Activities
Langkah 1 : Klik menu Activities.
Langkah 2 : Maka akan menampilkan halaman yang berisi tentang kegiatan yang telah dilaksanakan.
7. Algoritma Alumni
Langkah 1 : Klik menu Alumni.
Langkah 2 : Maka akan menampilkan halaman data alumni.
Langkah 3 : Jika ingin mendaftar maka pilih menu daftar alumni. Kemudian isi biodata alumni, kemudian klik tombol daftar maka data akan disimpan. Jika ingin batal klik tombol reset.
32
Langkah 4 : Jika ingin kembali ke halaman awal maka pilih menu home.
8. Algoritma Galeri
Langkah 1 : Klik menu Galeri
Langkah 2 : Maka akan menampilkan halaman galeri.
9. Algoritma Administrator
Langkah 1 : Klik menu Administrator
Langkah 2 : Di tampilan menu login isikan username dan password yang benar Langkah 4 : Klik tombol login
Langkah 5: Data tersimpan ke dalam variabel $username, $password ke menu admin
Langkah 6 : Jika pengisian data sukses maka akan tampil menu admin jika gagal maka user harus mengganti username ataupun password yang benar.
BAB 5