STIE Purna Graha
Data Profil Kampus Data Akademik
Data Kemahasiswaan Data Fasilitas
Data Informasi PMB Sistem
Pengolahan Data
Informasi
Pencari Informasi
Gambar 5.9. DFD Konteks Sistem Informasi STIE Purna Graha
5.2.2.2. Pengkodean Pogram
Rancangan pendahuluan yang telah dirancang dimulai dari diagram alir data yang menjelaskan serta mempermudah pada perancangannya merupakan
bentuk implementasi dari program yang dibuat. Pada implementasi ini alur tersebut diterjemahkan ke dalam bahasa pemograman dengan menggunakan
konfigurasi dari script code PHP serta database MySQL. Untuk membuat pengkodean program, digunakan program Macromedia Dreamweaver MX 2004.
Pada program ini banyak fasilitas yang diberikan terutama untuk ekstensi-ekstensi file yang mendukung PHP dan juga database yang mendukung PHP.
Cara pengkodean program aplikasi yang dibuat adalah sebagai berikut: 1.
Menjalankan program Macromedia Dreamweaver MX 2004, maka akan diperoleh tampilan awal seperti gambar berikut:
Universitas Sumatera Utara
Gambar 5.10. Tampilan awal Program Macromedia MX 2004
2. Memilih Create New – PHP, maka akan diperoleh tampilan awal seperti
gambar berikut:
Universitas Sumatera Utara
Insert bar
Listing Codeprogram Property Inspector
Document Toolbar
Site Panel
Gambar 5.11. Jendela masuk PHP pada Dreamweaver MX 2004
Keterangan : a.
Listing Code Listing code merupakan tempat untuk menuliskan script code kode skrip
b. Insert bar
Insert bar berisi tombol untuk memasukkan beberapa jenis objek, seperti gambar, tabel, dan layer ke dokumen. Tiap objek yang dimasukkan pada
dasarnya adalah potongan kode PHP yang dapat diatur atributnya. c.
Document Toolbar Document toolbar berisi tombol dan pop-up menu yang menyediakan
beberapa cara untuk menampilkan dokumen seperti Design view dan code
Universitas Sumatera Utara
view, beberapa option dan beberapa operasi umum seperti melakukan preview dokumen ke browser.
d. Property Inspector
Property inspector adalah tempat mengubah beberapa property yang dimiliki oleh objek atau teks.
e. Site Panel
Pada site panel bisa untuk mengatur file dan folder yang akan digunakan untuk site.
5.2.2.3. Mendesain Halaman Web 5.2.2.3.1. Struktur Data Informasi
Data Informasi yang telah dikumpulkan terlebih dahulu dibuat dalam terstruktur agar terlihat rapi dan indah. Berikut struktur data informasi yang
dirancang. a. Profil Kampus, terdiri dari informasi berupa:
• Pendahuluan
• Sejarah singkat
• Visi, misi dan tujuan
• Azas, Tugas pokok dan Fungsi
• Struktur pimpinan
• Logolambang
b. Akademik, terdiri dari informasi berupa: •
Program studi
Universitas Sumatera Utara
• Pimpinan program studi
• Staf pengajar
• Kalender akademik
c. Kemahasiswaan, terdiri dari informasi berupa: •
Lembaga kemahasiswaan •
Hak dan kewajiban •
Tata tertib •
Perwalian •
Profil alumni d. Fasilitas, terdiri dari informasi berupa:
• Gedung Kuliah
• Perpustakaan
• Laboratorium Komputer
e. Informasi penerimaan mahasiswa baru PMB, terdiri dari informasi berupa: •
Syarat-syarat pendaftaran •
Jadwal penerimaan mahasiswa baru •
Biaya pendidikan
5.2.2.3.2. Mengatur Properti Halaman Web
Sebelum mendesain halaman web, terlebih dahulu mengatur properti halaman lembar kerja. Untuk mengatur properti halaman lembar kerja dilakukan
dengan cara memilih perintah menu Modify-Page Properties, maka akan tampil kotak dialog seperti tampak pada gambar berikut:
Universitas Sumatera Utara
Gambar 5.12. Kotak Dialog Page Properties
5.2.2.3.3. Desain Tata Letak Halaman Website
Salah satu cara yang paling umum digunakan desain tata letak halaman website adalah dengan penggunaan fasilitas tabel. Untuk membuat tabel adalah
dengan cara memilih menu Insert Table, seperti pada gambar berikut:
Gambar 5.13. Kotak Dialog Insert Tabel
Adapun desain tata letak website STIE Purna Graha tampak pada Gambar 5.6. yang dibagi atas empat area, yakni area header, area menu, area content, dan
area footer.
Universitas Sumatera Utara
HEADER MENU
CONTENT
FOOTER
Gambar 5.14. Desain Tata Letak Website STIE Purna Graha
a. Header Desain pada header diisi dengan informasi: Logo, nama lembaga, menu
Home, menu Sitemap, Menu Hubungi kami, dan fasilitas search sehingga tampak pada Gambar 5.15.
Gambar 5.15. Desain Header Tata Letak Website STIE Purna Graha
b. Area Menu Area menu menampilkan beberapa menu yang dibagi atas beberapa sub menu.
Universitas Sumatera Utara
Gambar 5.16. Desain Menu-menu Informasi yang ditempatkan pada Area Menu
Menu informasi pada Gambar 5.16 dibagi atas beberapa sub menu seperti tampak pada Gambar 5.17.
Gambar 5.17. Beberapa Menu yang dibagi atas Beberapa Sub Menu
Universitas Sumatera Utara
c. Content Pada area content merupakan tempat peletakan isi website yang menampilkan
informasi keterangan dari menu atau submenu. Misalnya pada menu pendahuluan:
Gambar 5.18. Desain Area Content yang Menampilkan Informasi pada Menu Pendahuluan
d. Footer Area footer biasanya digunakan tempat peletakan informasi tentang tahun
pembuatan website disertai dengan alamat dari website tersebut. Seperti tampak pada Gambar 5.19.
Copyright 2009 © STIE PURNA GRAHA PEKANBARU All Right Reserved ~ Powered by M Phone : 0761 - 65954 | e-mail : infopurnagraha.ac.id
Gambar 5.19. Desain pada Area Footer
5.2.2.3.4. Desain Halaman Utama
Halaman utama adalah halaman web yang akan tampil pertama kali ketika melakukan panggilan terhadap domain yang dituju. Langkah yang dilakukan
untuk desain halaman utama adalah membuka lembar kerja dari tata letak website
Universitas Sumatera Utara
yang telah didesain. Kemudian menempatkan data informasi yang akan ditampilkan sesuai dengan area-area yang telah dirancang, seperti data informasi
yang telah dirancang pada area header, area menu, area content, dan area footer. Pada halaman utama untuk area content akan ditampilkan informasi
berupa pendahuluan yang merupakan menu dari home dan juga sub menu dari profil kampus. Tampilan halaman utama tampak pada Gambar 5.20.
Gambar 5.20. Tampilan Halaman Utama
Untuk desain halaman web lainnya, prosedur pengerjaannya sama seperti pada desain halaman utama, hanya saja mengganti data informasi yang akan
ditampilkan pada area content. Semua desain halaman web yang dirancang dapat dilihat pada lampiran.
Universitas Sumatera Utara
5.2.2.4. Eksekusi Program Aplikasi Web
Untuk melakukan eksekusi pada web emulator kita harus mengaktifkan sistem server pada komputer, dengan menjalankan start apache dan MySQL.
Gambar 5.21. Eksekusi Program Aplikasi
5.2.2.5. Menjalankan Desain Halaman Web
