Metode Perancangan
4.4 Metode Perancangan
Metode perancangan sistem ini menggunakan metode pendekatan atas-bawah (top and down approach ). Perancangan ini dimulai dari bentuk yang luas yaitu diagram konteks, kemudian diturunkan secara bertahap menjadi bentuk yang lebih detail.
4.4.1 Pembuatan Diagram Alir (Flowchart)
Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan navigasi antara halaman tersebut. Secara sederhana flowchart keseluruhan web ini dapat dilihat sebagai berikut :
Keterangan :
A = Halaman Utama
Keterangan :
B = Tampilan Home
F = Tampilan Galeri
Gambar 4.1 Flowchart Perancangan Website Inter Club Indonesia Kordinator Daerah Sumatera Utara
Login
Input Username
dan
Pasword
Login
Halaman Utama
Logout
Welcome Screen
Gambar 4.2 Flowchart User
Login
Input Username
dan
Pasword
Login
Halaman Admin
Logout
Welcome Screen
Gambar 4.3 Flowchart Admin
4.4.2 Diagram Konteks (Contex Diagram)
Diagram Kontek (Contex Diagram) adalah diagram level tertinggi dari DFD yang menggambarkan hubungan sistem dengan sistem dengan lingkungan luar web. Data flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan Diagram Kontek (Contex Diagram) adalah diagram level tertinggi dari DFD yang menggambarkan hubungan sistem dengan sistem dengan lingkungan luar web. Data flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan
Disamping itu DFD adalah salah satu alat pembuatan model yang sering digunakan, khususnya bila fungsi-fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data yang dimanipulasi oleh sistem.
Gambar 4.4 Diagram Konteks Perancangan Sistem Informasi Inter Club Indonesia Kordinator Daerah Sumatera Utara Berbasis Web
Gambar 4.5 DFD Level 0
Gambar 4.6 DFD Level 1 Berita
Gambar 4.7 DFD Level 1 Inter
Gambar 4.8 DFD Level 1 ICI PROVSU
Gambar 4.9 DFD Level 1 Galeri
Gambar 4.10 DFD Level 1 Toko
Gambar 4.11 DFD Level 1 Forum
Gambar 4.12 DFD Level 1 Kontact
4.4.3 Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) adalah suatu model untuk menjelaskan hubungan antar data dalam basis data (database) berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi.
Tanggal
Id Isi
News
Judul Gambar
Status
Gambar 4.13 ERD News
Gambar 4.14 ERD Pertandingan
Gambar 4.15 ERD ICIPROVSU
Gambar 4.16 ERD Gallery
Gambar 4.18 ERD Forum
Gambar 4.19 ERD Contact
Gambar 4.20 ERD Admin dan User
4.5 Tabel Database
Database digunakan untuk tempat penyimpanan data yang di masukkan atau diinput. Kemudian data tersebut akan ditampilkan dalam website. Berikut tabel database Website Pemerintahan Desa Firdaus Kecamatan Sei Rampah.
Nama Field
Tipe Data
Ukuran
Keterangan
9 Id Berita isi
id
Int
Isi Berita judul
Text
Text
Text
Text
Judul Berita Judul Berita
50 Gambar Berita status
Varchar
Varchar
50 Status Berita
Tabel 4.1 Tabel Database News
Nama Filed
Tipe Data
Ukuran
Keterangan
3 Id Pertandingan gambar
id
Int
Gambar Pertandingan hari
Text
Text
Tanggal Pertandingan jam
Text
Text
Waktu Pertandingan des
Text
Text
Deskripsi Pertandingan cup
Text
Text
20 Kejuaraan Pertandingan skor
Varchar
10 Skor Pertandingan tanggal
Varchar
Waktu Update status
Text
Text
Varchar
50 Status Pertandingan
4.2 Tabel Database Pertandingan
Nama Field
Tipe Data
Ukuran
Keterangan
10 Id Regional regional
id
Int
50 Nama Regional agenda
Varchar
Agenda Regional pengurus
Text
Text
Pengurus Regional kontak
Text
Text
Kontak Regional gambar
Text
Text
Varchar
50 Logo Regional 50 Logo Regional
Timestamp
Timestamp (on update)
Tanggal Update
Tabel 4.3 Tabel Database ICIPROVSU (Regional)
Nama Field
Tipe Data
Ukuran
Keterangan
3 Id Gambar gambar
id
Int
Gambar des
Text
Text
Deskripsi Gambar waktu
Text
Text
Timestamp
Timestamp (on
Taggal Update
update)
Tabel 4.4 Tabel Database Gallery
Nama Field
Tipe Data
Ukuran
Keterangan
idbrg
3 Id Produk tgl
Int
Timestamp
Timestamp (on
Tanggal Update
update)
namabrg
50 Nama Produk spek
Varchar
Spesifikasi Produk hargabrg
Text
Text
7 Harga Produk stok
Int
2 Stok Produk gambar
Int
Gambar Produk status
Varchar
Varchar
50 Status Produk
Tabel 4.5 Tabel Database Produk
Nama Field
Tipe Data
Ukuran
Keterangan
id_topik
5 Id Topik nama
Int
50 Nama User avatar
Varchar
50 Avatar User topik
Varchar
Topik Forum isi
Varchar
Isi Topik id_reply
Text
Text
5 Id Reply waktu
Int
Timestamp
Timestamp (on
Tanggal Update
update)
nama_reply
Varchar
20 Nama Reply
Tabel 4.6 Tabel Database Forum
Nama Field Tipe Data
Ukuran
Keterangan
3 Id Pesan waktu
id
Int
Timestamp
Timestamp (on
Tanggal Update
update)
nama
Nama User/Guest email
Varchar
255
Email User/Guest pesan
Varchar
255
Isi Pesan avatar
Varchar
255
Avatar User status
Text
Text
Status User/Guest username
Text
Text
Text
Text
Username User
Tabel 4.7 Tabel Database Kontact
BAB 5 IMPLEMENTASI SISTEM
5.1 Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain sistem supaya siap untuk dioperasikan, termasuk juga menulis kode program jika tidak digunakan perangkat lunak seperti aplikasi.
5.1.1 Tujuan Implementasi Sistem
Adapun tujuan – tujuan dari implementasi sistem, yaitu :
a. mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana penyaji informasi.
b. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui.
c. Memastikan bahwa pengunjung dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.
d. Mempethitungkan bahwa sistem telah memenuhi permintaan pemakai, yaitu dengan menguji sistem secara menyeluruh.
e. Memastikan bahwa sistem telah berjalan dengan lancar dengan mengontrol dan melakukan instalasi secara benar.
5.2 Komponen Pada Sistem
Beberapa komponen yang sangat dibutuhkan pada perancangan web ini antara lain :
5.2.1 Hardware
Hardware merupakan komponen yang membantu menunjang terlaksananya sitem yang dirancang. Dalam hal ini penulis merinci komponen hardware yang digunakan dalam perancangan, yaitu :
a. Personal Computer dengan Processor AMD E-350 APU with Radeon(tm) HD Graphic (2 CPUs), `1.6GHz
b. Hard Disk 298 GB
c. Memory 2048 MB RAM
5.2.2 Software
Software sangat berhubungan dengan Hardware. Tanpa adanya software, Hardware tidak akan berfungsi sesuai dengan yang diharapkan. Adapun software yang digunakan dalam perancangan website ini adalah : Software sangat berhubungan dengan Hardware. Tanpa adanya software, Hardware tidak akan berfungsi sesuai dengan yang diharapkan. Adapun software yang digunakan dalam perancangan website ini adalah :
Gambar 5.1 Windows 8 Pro
b. Sublime Text 2 Software ini berfungsi sebagai teks editor dalam pembuatan script perancangan website .
Gambar 5.2 Sublime Text 2
XAMPP digunakan sebagai web server, PHP sebagai bahasa pemrograman dan MySQL sebagai databasenya.
Gambar 5.3 XAMPP Control Panel
Gambar 5.4 Localhost XAMPP Gambar 5.4 Localhost XAMPP
image yang dibutuhkan untuk kebutuhan website.
Gambar 5.5 Adobe Photoshop CS3 Extended
5.2.3 Brainware
Brainware adalah setiap orang yang terlibat dalam kegiatan pemanfaatan komputer atau sistem pengolahan. Brainware juga dapat diartikan sebagai perangkat intelektual yang mengoperasikan kemampuan dari hardware dan juga software komputer. Brainware yang dibutuhkan adalah administrator dan pengguna (user). Administrator dibutuhkan untuk bekerja pada server dalam pengolahan data website dan mengeri tentang bahas pemrogramannya. Sedangkan pengguna (user) tidak harus memiiki kemampuan khusus, hanya saja mampu menggunakan internet serta
5.3 Uji Program
Dari hasil uji program yang telah dilakukan, maka dapat dilihat tampilan hasil desain web dinamis pada website Inter Club Indonesia Kordinator Daerah Sumatera Utara, sebagai berikut :
Gambar 5.6 Tampilan Welcome Screen
Gambar 5.8 Tampilan Halaman News
Gambar 5.9 Tampilan Halaman Inter
Gambar 5.10 Tampilan Halaman ICIPROVSU
Gambar 5.11 Tampilan Halaman Gallery
Gambar 5.12 Tampilan Halaman Store
Gambar 5.13 Tampilan Halaman Forum
Gambar 5.14 Tampilan Halaman Contact
Gambar 5.15 Tampilan Halaman Admin
BAB 6 KESIMPULAN DAN SARAN