PERANCANGAN SISTEM
3.1. Mendefinisikan Web Dalam Dreamweaver MX 2004
Pertama sekali yang perlu kita lakukan sebelum membangun web yang akan kita buat agar semua file tertata rapi dan terkumpul pada satu dokumen maka kita perlu mendefinisikan sebuah web. Dreamweaver memberikan kemudahan bagi kita dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu kita perlu mendefinisikan sebuah web proyek yang baru kepada area kerja Dreamweaver.
Untuk mendefinisikan web baru, klik menu Site pilih Manage Site seperti yang terlihat dibawah ini :
Setelah itu klik New pilih Site untuk menampilkan window yang berisi pengaturan site yang akan dibuat. Pilih tab Advanced pilih Category pilih Lokal Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini adalah keterangannya :
1. Pada isian Site name, isikan nama proyek web yang akan kita buat. Pada Tugas Akhir saya ini, saya memberi nama proyeknya dengan Krakatau.
2. Local root folder merupakan folder utama proyek kita. Beri centang pada Refresh local file list automatically agar file terbaru kita muncul di Dreamweaver.
3. Default image folder merupakan folder tempat file-file gambar kita disimpan. Default images folder harus berada pada didalam Local root folder.
4. Jika kita telah memiliki domain isikan alamat domain kita di isian HTTP address agar semua link yang ada pada halaman web kita selalu dicek.
5. Enable cache memungkinkan Dreamweaver menggunakan temporary file ketika ketika kita mengetes halaman web yang kita buat (Preview in Browser) pada browser di komputer lokal. Fungsinya untuk mempercepat proses pengeksekusian file ke browser.
3.2. Gambaran Umum Pembuatan Program
Sistem yang dibuat dalam situs ini bersifat intern, yang berarti pengguna program ini hanya kalangan tertentu yang memiliki hak akses terhadap program. Program bekerja dalam sebuah web server dan dapat diakses melalui jaringan intranet atau internet. Karena program ini berjalan dalam sebuah jaringan intranet atau internet, maka dapat dijalankan secara multiuser, dapat diakses oleh banyak pengguna secara bersamaan dari komputer yang berbeda-beda. Bagian – bagian yang akan mengakses program ini adalah:
1. Administrator
Halaman administrator web bertanggung jawab atas data-data yang diinformasikan pada halaman web. Data - data yang ditampilkan pada web diambil langsung datanya dari database. Ada 3 cara kerja dari seorang admin dalam mengolah data pada database : menambah data baru, mengubah data yang telah ada, dan
menghapus data yang tidak diperlukan lagi. Data – data yang dimasukkan, diubah ataupun dihapus administrator pada web SMA Krakatau Medan adalah :
a. Data Guru dan Pegawai
Data guru dan karyawan ini akan diinput, diubah atau dihapus mencakup nama, nip, golongan, jabatan dan bidang studi, strata pendidikan terakhir dan tamat pada tahun dari guru atau pegawai sekolah tersebut. Berikut ini adalah contoh tampilan dari input data guru dan pegawai baru dan konfigurasi data guru dan pegawai seperti mengubah atau menghapus data guru dan pegawai.
Gambar 3.4 Gambar Konfigurasi Data Guru / Pegawai
Sedangkan untuk melihat tampilan utama data guru dan pegawai yang ditampilkan dalam halaman web dapat dilihat dibawah ini :
b. Data Guru Mengajar Pada Kelas dan Jumlah Jam Mengajar
Data guru mengajar pada kelas dan jumlah jam mengajar ini akan diinput mencakup kelas yang diambil dan jumlah jam mengajar. Dibawah ini adalah contoh tampilan formnya :
Gambar 3.6 Gambar Form Input Data Guru Mengajar
Sedangkan untuk melihat tampilan data guru yang mengajar pada tampilan utama web dapat kita lihat contohnya dibawah ini :
c. Data Daftar
Data daftar diperoleh dari siswa yang mendaftar pada web SMA Krakatau Medan. Administrator mempunyai hak untuk menghapus data para siswa / siswi yang mendaftar. Data daftar mencakup nama siswa, nomor induk siswa, jenis kelamin, kelas, username dan password. Di bawah ini adalah tampilan form pendaftaran siswa / siswi pada web SMA Krakatau Medan dan data daftar yang bisa dihapus administrator meliputi username dan password dari siswa / siswi.
Gambar 3.8 Form Pendaftaran atau Registrasi Siswa / Siswi
d. Data Pengunjung
Data para pengunjung bisa dihapus oleh administrator. Data pengunjung mencakup nama dan komentar. Dibawah ini contoh tampilan data pengunjung yang dapat dihapus oleh administrator.
Gambar 3.10 Gambar Data Pengunjung Yang Dapat Dihapus
Sedangkan untuk melihat tampilan data pengunjung yang disajikan pada halaman utama web yang dapat dilihat pengunjung lain, dapat kita lihat pada tampilan dibawah ini :
e. Data Sekolah
Data sekolah meliputi data ruang pada sekolah dan jumlah ruang dari ruangan tersebut. Data sekolah memiliki field-field seperti nama_ruang, jumlah_ruang dan keterangan. Pihak administrator dapat memasukkan datanya mempergunakan fasilitas Command Dos MySQL. Gambar 3.12 adalah bentuk tampilan data sekolah :
Gambar 3.12 Tampilan Halaman Ruang Sekolah
2. Pengunjung
Pengunjung yang bukan siswa / siswi SMA Krakatau Medan atau dari pengunjung biasa (umum) dapat melihat informasi yang disajikan pada web, sedangkan jika pengunjungnya siswa / siswi SMA Krakatau Medan dapat memberikan komentarnya pada buku tamu dengan terlebih dahulu login sebagai member.
3.3. Persiapan Database
Database dapat diumpamakan sebagai sebuah tempat penyimpanan data yang erstruktur agar dapat diakses dengan cepat dan mudah. Membangun sebuah database merupakan langkah awal pembuatan aplikasi, termasuk aplikasi yang akan dibuat di sini.
Dalam perancangan web SMA Krakatau Medan ini, penulis membuat 5 (lima) tabel dalam database krakatau. Tabel – tabel tersebut adalah tabel daftar, table pengunjung, tabel guru pegawai, tabel mengajar, tabel sekolah dan tabel admin. Pembuatan database dan tabel-tabel mempergunakan fasilitas MySQL dengan terlebih dahulu login sebagai user. Dibawah ini adalah gambaran isi dari masing-masing tabel.
1. Tabel Daftar
Tabel daftar adalah digunakan untuk menampung data siswa / siswi yang telah mendaftarkan diri di web SMA Krakatau Medan. Berikut ini adalah field-field yang dibuat dalam tabel daftar.
Tabel 3.1 Tabel Daftar
Field Jenis No_sis int(10) Nama Varchar(50) Nomor Varchar(10) Jkelamin Varchar(15) User_name Varchar(50) Password Varchar(30)
2. Tabel Guru Pegawai
Tabel guru pegawai adalah digunakan untuk menampung data guru dan pegawai SMA Krakatau Medan. Berikut ini adalah field-field yang dibuat dalam table guru pegawai.
Tabel 3.2 Tabel Guru Pegawai
Field Jenis
Id_guru int(11)
Nama Varchar(50)
Jabatan Varchar(15)
TTL Varchar(30)
Pend. Terakhir char(3) Bidang_Ilmu Varchar(30) Mengajar_mata_pelajaran Varchar(20) Pengalaman_mengajar Varchar(30)
3. Tabel Mengajar
Tabel mengajar adalah digunakan untuk menampung data guru yang mengambil mata pelajaran pada kelas dan jumlah mata pelajaran. Berikut ini adalah fieldfield yang dibuat dalam tabel mengajar.
Tabel 3.3 Tabel Mengajar
Field Jenis
Id_guru int(11)
Kls Varchar(20)
Jml_jam Varchar(20)
4. Tabel Pengunjung
Tabel pengunjung adalah digunakan untuk menampung data para siswa / siswi yang telah memberikan komentarnya pada SMA Krakatau Medan. Berikut ini adalah field-field yang dibuat dalam tabel pengunjung.
Tabel 3.4 Tabel Pengunjung Field Jenis No int(10) Nama Varchar(50) Komentar longtext 5. Tabel Sekolah
Tabel sekolah adalah digunakan untuk menampung data sekolah pada sekolah SMA Krakatau Medan Kutacane meliputi nama ruang dari sekolah dan jumlah ruang pada sekolah serta keterangan singkat. Berikut ini adalah field-field yang dibuat dalam tabel sekolah.
Tabel 3.5 Tabel Sekolah
Field Jenis
No int(5)
Nama_ruang Varchar(40) Jumlah Ruang Varchar(2)
Keterangan Text
6. Tabel Admin
Tabel admin adalah digunakan untuk menampung data dari admin pada web SMA Krakatau Medan. Berikut ini adalah field-field yang dibuat dalam tabel admin.
Tabel 3.6 Tabel Admin
Field Jenis
id int(10)
User_admin Varchar(40) Pass_admin Varchar(20)
Pembuatan masing-masing tabel digunakan untuk menerima data-data yang diinput baik lewat form ataupun langsung dimasukkan lewat fasilitas Command Line MySQL. Dan setiap tabel mempunyai data-data yang berbeda
3.4. Membangun Halaman Situs
Situs SMA Krakatau medan diakses atas dasar kebutuhan informasi dari tiap pengunjung. Berikut ini adalah halaman – halaman situs SMA Krakatau Medan yang dibangun penulis agar pengunjung dapat menerima informasi yang disajikan.
SMA KRAKATAU MEDAN
SEJARAH PROFIL PENGAJAR ADMINISTRATOR SISWA ADMINISTRATOR
FASILITAS SEKOLAH KATA SAMBUTAN
VISI DAN MISI
DATA GURU DAN PEGAWAI
DATA GURU MENGAJAR
CARI GURU DAN PEGAWAI EKSTRAKURIKUL ER SISWA DAFTAR SISWA / MEMBER SISWA PENERIMA PMDK RUANG SEKOLAH
Gambar 3.13 Rancangan Halaman Web Yang Dibangun
1. Halaman Profil (Index)
Merupakan halaman utama yang pertama kali diakses saat situs dibuka. Halaman Profil berisi mengenai Kata Sambutan dari pihak sekolah mewakili Bapak Kepala Sekolah, Visi dan Misi dari Sekolah, dan Fasilitas – fasilitas yang ada pada sekolah SMA Krakatau Medan seperti :
a. Laboratorium IPA, Komputer dan Bahasa b. Ruangan Musholla dan Perpustakaan c. Lapangan Olahraga seperti Bola Basket
2. Halaman Pengajar
Merupakan halaman mengenai Data Guru dan Pegawai, Data Guru Mengajar pada kelas dan Jumlah Jam Mengajar, serta Pencarian Data Guru maupun Pegawai Sekolah dari tool pencarian.
3. Halaman Buku Tamu
Halaman buku tamu adalah halaman dimana siswa / siswi dapat mengisi dan memberikan komentar pada web SMA Krakatau Medan.
4. Halaman Siswa
Halaman siswa ini berisi Kegiatan Ekstrakurikuler yang dapat diikuti oleh siswa / siswi, Daftar siswa / siswi sebagai member untuk dapat mengisi buku tamu, dan Daftar siswa / siswi penerima PMDK tahun ajaran 2005 / 2006 dari berbagai Perguruan Tinggi Negeri.
5. Halaman Administrator
Halaman administrator adalah halaman khusus yang diakses oleh seorang admin untuk melakukan pengaturan seperti membuat, menghapus atau mengubah data guru dan pegawai, data guru mengajar pada kelas dan jumlah jam mengajar seorang guru, menghapus buku tamu dan member.
3.5. Flowchart Situs
Di dalam web SMA Krakatau Medan, terdapat alur - alur aktivitas yang dapat kita gambarkan dalam bentuk flowchart. Flowchart sendiri merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman per halaman. Dibawah ini adalah bentuk-bentuk flowchart yang didapat dari web SMA Krakatau Medan.
a. Flowchart Menu Utama
Seorang pengunjung dapat mengakses web SMA Krakatau Medan dan dapat berpindah halaman web menuju halaman lain. Terdiri dari 5 halaman utama yakni halaman profil, pengajar, buku tamu, siswa dan administrator. Masing – masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung kecuali halaman buku tamu dan halaman administrator. Flowchart Menu Utama dapat dilihat pada gambar 3.14 dibawah ini :
START TAMPILAN WEB PILIH LINK PADA MENU
SEJARAH PROFIL PENGAJAR BUKU TAMU SISWA ADMINISTRATOR END SEJARAH PILIH LINK YANG ADA PILIH LINK YANG ADA DAFTAR SISWA MEMBER BARU
PILIH LINK YANG ADA FORM ADMINISTRATOR
b. Flowchart Buku Tamu
Untuk halaman buku tamu saat mengakses halamannya, diperlukan login dahulu sebagai member, baru dapat mengisi buku tamu. Jika bukan member pada web SMA Krakatau Medan, kita perlu mendaftarkan diri pada form registrasi yang tersedia pada halaman web. Form pendaftaran buku tamu hanya dikhususkan untuk siswa / siswi SMA Krakatau Medan. Flowchart buku tamu dapat dilihat pada gambar 3.15 dibawah ini : START BUKU HALAMAN TAMU DAFTAR SISWA MEMBER BARU SIMPAN
SMPAN DATA BASE
DATA SUDAH DISIMPAN
MENUJU HALAMAN BUKU TAMU LOGIN MEMBER STATUS MEMBER HALAMAN ISI BUKU TAMU SIMPAN LIHAT BUKU TAMU END
SMPAN DATA BASE DATA SUDAH DISIMPAN
DATA SUDAH DISIMPAN ISI BUKU
TAMU
c. Flowchart Administrator
Halaman administrator hanya diakses oleh seorang yang berhak mengaksesnya. Data login dan password dari seorang administrator harus sesuai dengan data yang ada pada tabel administrator. Jika data login dan password sesuai, maka admin diantarkan menuju tampilan halaman administrator, jika proses login gagal, maka kembali lagi ke halaman form administrator. Dapat kita lihat Gambar 3.16 adalah flowchart administrator.
START
BUKA HALAMAN ADMINISTRATOR
INPUT LOGIN & PASSWORD STATUS ADMINISTRATOR TAMPILKAN HALAMAN ADMINISTRATOR END
USERNAME DAN PASSWORD SALAH
IMPLEMENTASI SISTEM
4.1. Pengertian Implementasi Sistem
Implementasi Sistem adalah langkah-langkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, menginstall dan memulai sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama.
4.2. Komponen Dalam Implementasi Sistem
Agar sistem perancangan yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu kiranya dilakukan pengujian terhadap sistem yang telah kita kerjakan. Untuk itu dibutuhkan beberapa komponen utama mencakup perangkat keras (hardware), perangkat lunak (software), dan perangkat operator (brainware). Pada Web SMA Krakatau Medan ini dibutuhkan komponen - komponen yang mencakup seperti yang diatas.
1. Perangkat Keras (Hardware) meliputi : a. Monitor Super VGA.
b. CPU ( Central Proccessing Unit ).
c. Harddisk sebagai tempat sistem beroperasi dan media penyimpanan. d. Memori minimal 128 MB.
e. Keyboard dan Mouse.
2. Perangkat Lunak (Software) meliputi :
a. Sistem Operasi Windows XP. Penulis Menggunakan Sistem Operasi Windows XP.
b. MySQL sebagai bahasa pemograman untuk database dalam bahasa SQL (Structure Query Language) yang digunakan dalam mengolah dan mengelola database.
c. Editor pendesainan web dan penggabungan antara layout dengan bahasa pemograman seperti yang digunakan penulis yaitu Macromedia Dreamweaver MX 2004.
d. PHP sebagai bahasa pemograman server side, dapat membuat perintah query pada pemogramannya seperti perintah dasar SQL.
e. Web Server sebagai server local dalam pengetesan halaman web sebelum file-file dan script web dipublikasikan pada internet, seperti PWS (Personal Web Server) atau Apache Web Server seperti yang digunakan penulis.
f. Browser sebagai tempat melihat output atau tampilan halamn web, misal : Internet Explorer, Mozilla, Netscape Navigator, dan lain-lain.
3. Perangkat Operator (Brainware) yang dapat menjalankan web SMA Krakatau Medan terbagi 2 yaitu :
a. Administrator b. Pengunjung (Publik)
4.3. Instalasi Apache, PHP dan MySQL
Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu. Adapun softwarenya dapat diperoleh dari situs http://www.apache.org untuk Apache, http://www.php.net untuk PHP dan http://www.mysql.com untuk MySQL. Tahap instalasinya dimulai dengan menginstalasi Apache, kemudian disusul dengan menginstalasi PHP dan MySQL. Setelah instalasi selesai dilanjutkan dengan melakukan pengaturan konfigurasi yang diberikan setelah instalasi selesai. Namun hal ini memerlukan pengaturan yang sedikit rumit.
Alternatif lain yang digunakan penulis adalah dengan menginstalasi Xampp. Perangkat lunak Xampp dengan versi 1.4.12 dapat di download pada situs download.com. Aplikasi Xampp ini kita butuhkan sebagai :
1. Server Web. Di dalam paket Xampp dapat kita jumpai aplikasi Apache Web Server. Server Web adalah sebuah program yang berfungsi sebagai penerima dan mengolah permintaan browser web. Kode pemrograman server side seperti script PHP, dikirim dan dijalankan pada server, kemudian Server Web mengirimkan hasilnya pada komputer klien dan klien hanya dapat menerima hasilnya saja. 2. PHP. Pada paket Xampp ini juga dapat kita temui aplikasi PHP sebagai program
3. MySQL. Paket Xampp juga menyediakan aplikasi MySQL sebagai tempat penampungan dan penyimpanan data dari database.
Karena kelebihan paket Xampp ini, bisa menyediakan 3 paket aplikasi sekaligus, memudahkan kita dalam melakukan penginstallan paket tersebut, tanpa perlu lagi melakukan konfigurasi yang rumit terhadap ketiga aplikasi tersebut.
4.3.1. Instalasi Xampp 1.4.12
Menginstall Xampp berarti secara otomatis menginstall ketiga software utama yang akan digunakan pada pembangunan web dinamis SMA Krakatau Medan yaitu Apache, PHP dan MySQL tanpa perlu konfigurasi yang rumit. Serta dalam pengetesan ataupun untuk melihat hasil halaman web.
Adapun tahap-tahap instalasinya adalah sebagai berikut: 1. Klik ganda pada file xampp-win32-1.4.12-installer.
Gambar 4.1 Xampp-win32-1.4.12 installer
2. Pilih bahasa yang digunakan dalam proses instalasi. Pada tahap instalasi ini juga mendukung bahasa Indonesia.
Gambar 4.2 Pilihan Bahasa Instalasi Xampp 3. Klik tombol maju.
4. Klik saya setuju
Gambar 4.4 ApacheFriends XAMPP License
5. Untuk lokasi instalasi, penulis menyarankan untuk membiarkannya secara default.
6. Tunggu proses instalasi sampai selesai. Proses ini memerlukan waktu yang cukup lama. Jika sudah selesai akan tampil gambar di bawah ini:
Gambar 4.6 Setup selesai
4.3.2. Menjalankan Xampp
Setelah proses instalasi berjalan dengan sempurna, langkah selanjutnya ialah menjalankan Xampp. Untuk itu, buka aplikasi Xampp dengan mendouble klik icon Xampp yang ada didesktop, sehingga muncul kotak dialog Xampp Control. Jalankan fungsi Apache dan MySQL untuk mencoba halaman web pada tool browsing.
Gambar 4.7 Xampp Control
4.4. Tampilan Halaman
Pada web SMA Krakatau Medan memiliki banyak halaman. Tiap halaman utama masing - masing memiliki link yang tiap isi halaman webnya menunjukkan setiap informasi yang berbeda - beda. Untuk pengetesan pada tool browser, ketikkan pada address bar http://localhost untuk melihat tampilan Xampp Server pada browser. Untuk pengetesan halaman web SMA Krakatau sendiri ketikkan pada address bar browsing seperti berikut ni : http://localhost/krakatau. Penulisan krakatau setelah
localhost menunjukkan folder tempat penyimpanan file-file web SMA Krakatau Medan. Dibawah ini adalah contoh halaman utama pada web SMA Krakatau Medan. 1. Halaman Profil
Halaman profil pada web SMA Krakatau Medan berisikan tentang kata sambutan dari Kepala Sekolah SMA Krakatau Medan pada saat diakses pertama kali. Dibawah halaman kata sambutan terdapat halaman visi misi dari sekolah SMA Krakatau Medan, Fasilitas – fasilitas sekolah serta ruangan yang ada pada sekolah SMA Krakatau Medan. Gambar 4.8 adalah tampilan halaman profil pada web SMA Krakatau Medan.
Gambar 4.8 Halaman Utama Profil 2. Halaman Pengajar
Halaman pengajar pada web SMA Krakatau Medan berisikan tentang data guru dan pegawai sekolah SMA Krakatau Medan pada saat diakses pertama kali. Data
guru dan pegawai berisikan data meliputi nama, nip, golongan, bidang studi, jabatan, strata pendidikan terakhir dan tamatan pada tahun dari guru / pegawai tersebut. Di bawah halaman data guru dan pegawai adalah halaman data guru mengajar pada kelas dan umlah jam mengajar, serta tool pencarian data guru atau pegawai yang dapat dilakukan user untuk mencari data seorang guru atau pegawai. Pada gambar 4.9 di bawah ini adalah bentuk tampilan halaman data guru dan pegawai sekolah SMA Krakatau Medan.
Gambar 4.9 Halaman Utama Pengajar 3. Halaman Buku Tamu
Halaman buku tamu pada web SMA Krakatau Medan pada saat diakses maka akan muncul halaman yang menyatakan bahwa user harus login terlebih dahulu baru dapat mengisi buku tamu. Pengisian buku tamu hanya dilakukan oleh siswa / siswi SMA Krakatau Medan dengan terlebih dahulu login sebagai member. Gambar 4.10 adalah tampilan halaman buku tamu jika siswa / siswi belum login sebagai
member. Sementara gambar 4.11 adalah tampilan halaman buku tamu jika siswa / siswi sudah login sebagai member.
Gambar 4.10 Tampilan Utama Buku Tamu Saat Belum Login
4. Halaman Siswa
Halaman siswa pada web SMA Krakatau Medan berisikan tentang kegiatan ekstrakurikuler yang dapat diikuti oleh siswa / siswi sekolah SMA Krakatau Medan pada saat diakses pertama kali. Pada halaman selanjutnya adalah daftar member untuk para siswa / siswi yang kepingin mengisi buku tamu dilanjutkan dengan daftar para siswa siswi penerima pmdk tahun ajaran 2005/2006. Gambar 4.12 adalah tampilan halaman ekstrakurikuler.
KESIMPULAN DAN SARAN
5.1. Kesimpulan
Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan system dalam pembangunan web SMA Krakatau Medan. Maka dapat penulis simpulkan :
1. Situs SMA Krakatau Medan ini adalah sarana informasi online yang bisa diakses oleh siapapun juga, baik dari pihak sekolah maupun para pengunjung yang mengunjungi situsnya.
2. Perkembangan situs SMA pada setiap daerah membuat penulis mengambil inisiatif membuat tugas akhir berupa situs pendidikan yaitu situs SMA Krakatau Medan. 3. Situs SMA Krakatau Medan memberikan informasi yang sesuai dengan data yang
5.2. Saran
1. Diharapkan agar ada partisipasi dari pihak sekolah dalam memelihara dan memperbarui web SMA Krakatau Medan.
2. Kemudahan dalam penjelajahan web SMA Krakatau Medan perlu diperhatikan agar pengunjung dapat menerima informasi dengan mudah.
3. Kecepatan dalam membuka halaman web SMA Krakatau Medan perlu diperhatikan, agar pengunjung tidak merasa bosan karena harus menunggu lama untuk membuka halaman web.
