bab iii perancangan program a. perancangan dan …

BAB III

PERANCANGAN PROGRAM

A. PERANCANGAN DAN ANALISIS

Tahap analisis adalah tahap identifikasi penggunaan program yang

memberikan perbandingan metode pembelajaran klasikal dengan pembelajaran

elektronik (e-learning) berbasis web dengan membandingkan efisiensi dan

efektifitas penggunaan program pada peserta didik dan guru mata pelajaran

Teknologi Informasi dan Komunikasi. Perbedaan antara pembelajaran klasikal

dengan pembelajaran elektronik berbasis web berdasarkan pengamatan di

lapangan dapat dilihat dari tabel perbandingan dibawah ini :

Tabel 3.1 perbandingan pembelajaran

No Metode

pembelajaran

Alokasi Waktu Lokasi

pembelajaran

Gambaran

umum

1 Klasikal 07.15 WIB – 13.30

WIB (± 5 jam 15

menit)

Kelas fisik Pembelajaran

disampaikan

dengan metode

ceramah

2 Elektronik (e-

learning)

∞ (tidak memiliki

batasan waktu)

Dimanapun,

melalui akses

jaringan

komputer

Peserta didik

berinteraksi

secara langsung

dengan media

pembelajaran.

Tabel diatas menjelaskan bahwa pembelajaran klasikal yang menempatkan

guru sebagai pemberi materi utama melalui metode ceramah hanya memiliki

alokasi waktu terbatas yang kurang dari 7 jam dalam satu hari, sedangkan

pembelajaran elektronik berbasis web memberikan waktu yang lebih leluasa

kepada siswa maupun guru untuk mengakses media pembelajaran elektronik

49

50

berbasis web. Selain itu, melalui media pembelajaran elektronik berbasis web,

guru dan siswa dapat mengakses web e-learning secara berkala tanpa terbatas oleh

kelas fisik seperti pada media pembelajaran klasikal. Tabel tersebut merupakan

acuan analisa sebagai perbandingan nyata mengenai keuntungan menggunakan

media pembelajaran elektronik.

1. Daur Hidup Pengembangan Sistem

Analisa sistem yang dimaksud disini adalah identifikasi sistem yang

dibutuhkan untuk melakukan perancangan terhadap sistem yang berjalan pada

website e-learning TIK SMPN 3 Mandiraja. Yang dibutuhkan pada analisa sistem

ini adalah System Development Life Cycle (SDLC) atau daur hidup pengembangan

sistem. Dari beberapa SDLC yang ada, sebagai bahan analisa sistem yang

digunakan pada proyek tugas akhir ini adalah metode waterfall. Metode waterfall

merupakan suatu cara pengembangan software yang fase – fasenya berurutan.

Sebuah fase tidak bisa dikerjakan sebelum fase sebelumnya telah selesai

dikerjakan. Ilustrasi metode waterfall dapat dilihat pada gambar dibawah ini :

Gambar 3.1. SDLC Waterfall

51

Waterfall, merupakan SDLC tertua karena sifatnya yang natural. Model ini

adalah model yang muncul pertama kali yaitu sekitar tahun 1970 sehingga sering

dianggap kuno, tetapi merupakan model yang paling banyak dipakai didalam

Software Engineering (SE). Model ini melakukan pendekatan secara sistematis

dan urut mulai dari level kebutuhan sistem lalu menuju ke tahap analisis, desain,

coding, testing / verification, dan maintenance. Metode ini memberikan proses

project system yang lebih terjadwal dan terkontrol sehingga mengoptimalkan

kinerja sistem secara terpadu.

2. Kebutuhan Software

2.1. XAMMP 1.6.4 sebagai web server

XAMMP adalah paket web server yang menyediakan fasilitas paket basis

data dan pengelolaan website seperti apache, mysql, mercury, PHP dan ftp

yang di buat dalam satu sistem terpadu dan dapat di aktifkan secara

bersama. XAMMP banyak digunakan sebagai software manajemen sistem

website karena penggunaannya yang lintas platform. Untuk masuk ke

fasilitas pengelolaan basis data, dapat menekan link phpMyAdmin pada

kategori tools di sebelah kiri. phpMyAdmin pada XAMMP 1.6.4 memuat

banyak fasilitas manajemen basis data, semua menjadi satu kesatuan

terpadu didalam XAMMP 1.6.4 sehingga memberikan kemudahan kepada

pemakai dalam membuat basis data.

2.2. Adobe Photoshop CS

Sebagai software yang digunakan untuk membuat tampilan grafis web e-

learning TIK SMPN 3 Mandiraja. Adobe photoshop CS menyediakan

52

berbagai macam fasilitas editing gambar agar tampilan web lebih

menarik.

2.3. Notepad ++

Notepad ++ adalah software yang dapat digunakan untuk melakukan

editing pada syntax pemrograman yang digunakan untuk membangun

web. Kelebihan daripada notepad ++ dibandingkan dengan notepad

standard windows adalah dalam satu jendela notepad++ dapat berisi lebih

dari satu tab sehingga memudahkan pengguna dalam melakukan analisa.

Selain itu interface notepad++ lebih menarik dibandingan notepad

standard windows.

2.4. Web Browser

Web browser digunakan untuk mengakses web e-learning TIK SMPN 3

Mandiraja. Dapat pula digunakan untuk melakukan pemeriksaan terhadap

tampilan yang telah dibangun pada bahasa pemrograman apakah sudah

sesuai keinginan atau belum. Web browser yang digunakan harus

berintegrasi dengan XAMMP agar dapat melakukan pemanggilan web

yang telah dibangun dengan menggunakan PHP. Jenis-jenis web browser

antara lain Mozilla Firefox, Internet Explorer, Opera, Flock, dll

3. Data Flow Diagram (DFD)

Data flow diagram (DFD) atau Data Alir Diagram (DAD) web e-learning

mata pelajaran teknologi informasi dan komunikasi berbasis web yang

disusun adalah sebagai berikut :

53

Gambar 3.2. Diagram context Sistem web e-learning TIK

B. DESAIN BASIS DATA

1. Perancangan Tabel Basis Data

Dari DFD yang telah tersusun untuk membangun web e-learning

TIK SMPN 3 Mandiraja diatas, maka dengan menggunakan

PHPMyAdmin disusunlah tabel basis data seperti di bawah ini :

a) Tabel Anggota

Fungsi : menyimpan data anggota yang diakses menggunakan

nomor voucher yang dicocokkan menggunakan tabel

nominatif

Primary key : id_daftar

Tabel 3.2. Tabel anggota

No Nama field Type Size Keterangan

1 Id_daftar Integer 4 Nomor urut anggota

2 Nis Varchar 10 Nomor induk siswa

3 User_id Varchar 30 User id pendaftar

4 User_psw Varchar 32 Password anggota

5 Question Varchar 50 Pertanyaan lupa password

6 Hint Varchar 50 Jawaban lupa password

7 Tgl_daftar datetime Tanggal mendaftar

No voucher

Polling

Jawaban ujian

Pertanyaan forum

Jawaban forum

Nilai

Materi download

Jawaban forum

akun

votting

soal ujian

Pertanyaan forum

Materi upload

Nilai

Polling

Jawaban ujian

Jawaban forum

Sistem web e-

learning TIK

SMPN 3

Mandiraja

Siswa

Guru /

Admin

54

b) Tabel bab_soal

Fungsi : menyimpan informasi bab soal

Primary key : no_bab

Tabel 3.3. Tabel bab_soal


1 No_bab Integer 2 Nomor bab

2 Judul Text Judul bab

c) Tabel konsultasi_jawab

Fungsi : menyimpan informasi jawaban forum diskusi

Primary key : id_jawab

Tabel 3.4. Tabel konsultasi_jawab


1 Id_jawab Integer 4 Nomor id jawab

2 Id_tanya char 3 Nomor id tanya

3 jawaban text Jawaban konsultasi/forum

4 penjawab Varchar 30 Penjawab

5 tanggal datetime Tanggal posting forum

d) Tabel konsultasi_tanya

Fungsi : menyimpan informasi pertanyaan forum diskusi

Primary key : id_tanya

Tabel 3.5. Tabel konsultasi_tanya


1 Id_tanya Integer 3 Nomor id tanya

2 No_bab Char 4 Nomor bab forum

3 Pertanyaan Text Pertanyaan forum

4 Penanya Varchar 30 Penanya forum

5 Tanggal Datetime Tanggal posting forum

55

e) Tabel kuis

Fungsi : menyimpan informasi soal kuis untuk siswa

Tabel 3.6. Tabel kuis


1 No_bab Integer 2 Id Nomor bab

2 Nomor Integer 4 Nomor bab

3 Soal Varchar 100 Soal ujian

4 Jawab_a Varchar 60 Jawaban A

5 Jawab_b Varchar 60 Jawaban B

6 Jawab_c Varchar 60 Jawaban C

7 Jawab_d Varchar 60 Jawaban D

8 Kunci Enum(‘A’,

’B’,’C’,’D

’)

60 Kunci jawaban soal ujian

f) Tabel materi

Fungsi : menyimpan informasi materi unduhan

Primary key : id_materi

Tabel 3.7. Tabel materi


1 Id_materi Integer 4 Nomor id materi

2 No_bab Integer 2 Nomor bab materi

3 Judul Varchar 100 Judul materi

4 Definisi Text Definisi materi

5 Filename Char 32 Nama file materi

6 File_data Varchar 100 Data file materi

7 Tanggal Varchar 100 Tanggal unggah materi

g) Tabel nominatif

Fungsi : menyimpan data acuan siswa sebagai anggota e-learning

Primary key : nis

56

Tabel 3.8. Tabel nominatif



2 No_voucher Varchar 10 Nomor voucher inputan

3 Nama Varchar 20 Nama siswa/anggota

4 Tmpt_lhr Varchar 20 Tempat lahir siswa

5 Tgl_lhr Date Tanggal lahir siswa

6 Alamat Text Alamat siswa

h) Tabel polling

Fungsi : menyimpan informasi materi polling

Primary key : id

Tabel 3.9. Tabel Polling


1 Id Integer 3 Nomor id polling

2 Quest Varchar 50 Pertanyaan polling

3 Opt1 Varchar 50 Pilihan polling 1



6 Vote1 Int 4 Votting 1



i) Tabel skor

Fungsi : menyimpan informasi nilai kuis atau ujian online

Tabel 3.10. Tabel skor



2 Bab Integer 2 Bab ujian

3 Nilai Integer 2 Nilai ujian

4 Keterangan Enum(‘0’,’

1’)

Keterangan kelulusan,

0=mengulang, 1=lulus

5 Tanggal Date Tanggal ujian

57

j) Tabel tut_kategori

Fungsi : menyimpan informasi kategori tutorial pada mini blogging

Primary key : id_kategori

Tabel 3.11. Tabel tut_kategori


1 Id_kategori Integer 3 Nomor id kategori tutorial

2 Kategori Varchar 100 Kategori tutorial

k) Tabel tut_tutorial

Fungsi : menyimpan informasi tutorial mini blogging

Primary key : id_tutorial

Tabel 3.12. Tabel tut_tutorial


1 Id_tutorial Integer 3 Nomor id tutorial

2 Id_kategori Char 3 Nomor id kategori tutorial

3 Judul Varchar 100 Judul tutorial

4 Lengkap Text Tutorial lengkap

5 Tgl_masuk Datetime Tanggal posting tutorial

2. Relasi Antar Tabel

Tabel-tabel diatas memiliki relasi antar satu tabel dengan tabel yang lain

agar tercipta basis data yang terintegrasi dengan baik, adapun gambar

relasi antar tabel pada basis data web e-learning mata pelajaran teknologi

informasi dan komunikasi (TIK) SMPN 3 Mandiraja adalah sebagai

berikut :

58

Gambar 3.3. Relasi antar tabel

C. TAHAP STRUKTUR PROGRAM

Tahap pembuatan struktur program merupakan langkah untuk

menggambarkan secara umum bentuk program yang dibuat. Adapun tahap

struktur program e-learning mata pelajaran TIK SMPN 3 Mandiraja

adalah sebagai berikut :

59

a. Desain tampilan awal

Desain tampilan di bawah ini adalah desain awal ketika website di

akses. Adapun listing program tersimpan didalam default.php. design

awal tampilanya adalah sebagai berikut :

Gambar 3.4. Desain tampilan awal web e-learning

Nama page : default.php

Fungsi :

Sebagai tampilan awal ketika user mengakses web e-

learning TIK SMPN 3 Mandiraja.

Listing :

<?php session_start();?> <html> <head> <title>SMP Negeri 3 Mandiraja</title> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css">  </style></head> <body> <table width='90%' border='0' align='center'> <tr> <td colspan='2' align='center'>

Header Logo Sekolah

Visi dan misi Form Login Menu Bar

Footer

60

<img src = "graphics/header.jpg" width="800"></td> <td width='20%' align='center'> <img src = "graphics/logo smp 3.png" width="150"> </td> </tr> <tr> <td width='15%' align='center' valign='top'> <?php include "menu.php";?> </td> <td width='80%' align='center' class='content' valign='top'> <?php if(!$_GET){ echo "<h3>VISI DAN MISI</h3>"; include "visi.txt"; switch($_GET['pageId']){ case '1': include "files/unduh.php"; break; case '2': include "forum/tema.php"; break; case '3': include "miniblog/index.php"; break; case '4': include "forum/response.php"; break; case '5': include "profil.txt"; break; case '897654309': include "login2.php"; break; }} ?> </td> <td width='20%' align='center' valign='top'> . . . .

Penjelasan :

Listing ini berfungsi sebagai rancangan halaman utama ketika

user mengakses url e-learning TIK SMPN 3 Mandiraja.

b. Halaman Login

Halaman ini berfungsi sebagai halaman akses pengguna yang telah

terdaftar. Melalui halaman ini pengguna dapat memakai seluruh fasilitas

61

yang ada pada web e-learning TIK. Adapun design halaman login yang

dimaksud adalah sebagai berikut :

Gambar 3.5. Desain halaman login

Nama halaman : login1.php

Fungsi :

Menginput nama pengguna dan password untuk dapat membuka seluruh

fasilitas yang ada di web e-learning TIK. Listing php yang ada pada

login1.php membaca database pengguna pada mySql sehingga pengguna

yang memiliki nama pengguna dan kata sandi yang cocok akan secara

otomatis membuka seluruh fasilitas utama antara lain ujian dan download.

Listing :

. . . . <table align='center' border='0'> <tr> <td> <?php include "htmlform.php"; formstart("default.php","post"); echo "Nama Pengguna:<br />"; text("uname","20","16","",""); echo "<br />Kata Sandi:<br />"; sandi("sandi","20","16","","");

Nama Pengguna :

Kata Sandi :

Masuk Ulang

62

echo "<br />"; submit("Masuk","Ulang",""); formend(); if($_POST){ include "Connections/koneksi.php"; $query=mysql_query("SELECT anggota.user_Id, anggota.user_psw, anggota.nis, nominatif.nama FROM anggota, nominatif WHERE anggota.user_Id='$_POST[uname]' && nominatif.nis=anggota.nis LIMIT 1") or die (mysql_error()); $data=mysql_fetch_array($query); $dataLogin=md5("$_POST[uname]$_POST[sandi]"); if($dataLogin==$data['user_psw']){ $_SESSION['uname']=$data['nama']; $_SESSION['nis']=$data['nis']; }else { echo "user name atau sandi salah. ulangi lagi! jika lupa sandi, klik di bawah ini<br />"; echo "<a href='lostpasswd.php?uid=$_POST[uname]'>Lupa Sandi</a>";}

. . . .

Penjelasan :

Halaman ini memproses data yang telah di rekam oleh basis data sehingga

pemanggilan pengguna dapat dilakukan melalui proses login dengan

memasukkan nama pengguna dan kata sandi. Jika nama pengguna dan kata

sandi yang dimasukkan benar maka akan muncul nama pengguna dan link

logout, akan tetapi apabila nama pengguna dan kata sandi yang

dimasukkan salah atau tidak cocok maka akan muncul peringatan

mengulang login disertai link lupa password.

c. Desain Halaman Download

Halaman ini memuat materi yang di unggah oleh administrator (guru)

yang kemudian dapat di unduh oleh siswa setelah melakukan login ke

63

dalam web e-learning TIK SMPN 3 mandiraja. Desain form halaman

download adalah sebagai berikut :

Gambar 3.6. Desain halaman download

Nama halaman: unduh.php

Fungsi :

Menampilkan berkas yang telah di unggah oleh administrator sehingga

ketika siswa telah login dan menginginkan materi yang telah di unggah,

maka siswa dapat menekan link unduh dan sistem akan memanggil file di

dalam folder library (C:\xampp\htdocs\ekopuji\library) sesuai dengan file

yang di pilih oleh siswa.

Listing :

<?php if(!isset($_SESSION['nis'])){ include "login2.php";}else{ include "Connections/koneksi.php"; $query=mysql_query("SELECT * FROM materi ORDER BY id_materi") or die (mysql_error()); while($data=mysql_fetch_row($query)){

ID Modul

Bab

Judul

Definisi

Unduh <file yang di unduh>

Tanggal Unduh

64

echo "<table border='0' cellspacing='0' width='90%'>"; echo "<tr>"; echo "<td width='30%'>ID Modul</td>"; echo "<td width='70%'>$data[0]</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Bab</td>"; echo "<td>$data[1]</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Judul</td>"; echo "<td>$data[2]</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Definisi</td>"; echo "<td>$data[3]</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Unduh</td>"; echo "<td><a href='library/$data[5]'>$data[4]</a></td>"; echo "</tr>"; echo "<tr>"; echo "<td>Tanggal Unggah</td>"; echo "<td>$data[6]</td>"; echo "</tr>"; echo "</table>"; echo "<br />"; }} ?>

Penjelasan :

Listing di atas melakukan pemanggilan file yang tersimpan di dalam folder

library (C:\xampp\htdocs\ekopuji\library\ )untuk kemudian dapat di unduh

oleh siswa dengan menggunakan perintah echo.

d. Desain halaman Forum

Halaman ini berisi desain forum tanya jawab secara terbuka, terdiri atas

beberapa unsur yaitu penanya, pertanyaan, penjawab, jawaban dan tanggal

posting. Fasilitas forum ini dapat di buka tanpa harus login terlebih

dahulu. Ada beberapa desain form yang ada, salah satu di antaranya adalah

65

halaman question.php yang memuat form pertanyaan. Desain dari form

pertanyaan adalah sebagai berikut :

Gambar 3.7. Desain halaman pertanyaan forum

Nama halaman : question.php

Fungsi :

Merekam pertanyaan dan menampilkan pertanyaannya pada halaman

forum sehingga dapat di respon oleh pengguna lainnya melalui halaman

jawaban (response.php).

Listings :

<?php include "htmltag.php"; headstart(); include "../htmlform.php"; echo "<div style=\"position:absolute; top:15%; left:30%;\">"; //pilihbab include "../Connections/koneksi.php"; echo "<table>"; formstart("?submit=true&bab=$_GET[bab]","post"); echo "<tr>"; echo "<td>Bab yang ditanyakan</td>";

Bab yang ditanyakan

:

Nama Penanya

:

Pertanyaan :

kirim Ulang

66

$query=mysql_query("SELECT judul FROM bab_soal WHERE no_bab='$_GET[bab]' LIMIT 1") or die ("Gagal memilih bab soal. ".mysql_error()); $data=mysql_fetch_row($query); echo "<td>"; echo ": ".$data[0]; echo " </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Nama Penanya</td>"; echo "<td>: "; text("penanya","30","30","",""); echo "</td>"; echo "</tr>"; echo "<tr>"; echo " <td>Pertanyaan:</td>"; echo "<td>: "; area("pertanyaan","25","4","",""); echo "</td>"; echo "<tr><td colspan='2' align='center'>"; submit("Kirim","Ulang",""); echo "</td></tr>"; echo "</table>"; formend(); echo "</div>"; echo "<div style=\"position:absolute; top:65%; left:30%;\">"; if($_POST){ $tanggal=date('Y-m-d H:i:s'); include "../learn_funct.php"; sisip("konsultasi_tanya","$_GET[bab]","$_POST[pertanyaan]","$_POST[penanya]","$tanggal","","","",""); echo "<p align='center'><a href='../default.php?pageId=2&bab=$_GET[bab]'>Kembali</a></p>"; } echo "</div>"; headend(); ?>

Penjelasan :

Pertanyaan yang masuk akan direkam oleh basis data website dan

kemudian akan ditampilkan pada halaman forum sehingga pengguna yang

lain dapat merespon pertanyaan melalui link Balas yang akan mengarah ke

halaman response.php. Desain jawaban forumnya adalah sebagai berikut :

67

Gambar 3.8. Desain jawaban forum

Nama halaman : response.php

Fungsi :

Merekam jawaban dari pertanyaan yang ada pada forum dan di rekam oleh

basis data website yang kemudian akan ditampilkan.

Listings :

<?php include "htmltag.php"; headstart(); include "../htmlform.php"; echo "<div style=\"position:absolute; top:15%; left:30%;\">"; //pilihbab include "../Connections/koneksi.php"; echo "<table>"; formstart("?submit=true&idQ=$_GET[idQ]&bab=$_GET[bab]","post"); echo "<tr>"; echo " <td colspan='2'>"; $query=mysql_query("SELECT pertanyaan FROM konsultasi_tanya WHERE id_tanya='$_GET[idQ]' LIMIT 1" ); $data=mysql_fetch_row($query); echo "<i>$data[0]</i>"; echo " </td>"; echo "<tr>"; echo "<td>Nama Penjawab</td>"; echo "<td>"; text("responder","30","30","",""); echo "</td>"; echo "</tr>"; echo "<tr>";

jawaban :

kirim Ulang

Pertanyaan

Nama penjawab :

68

echo " <td>Jawaban:</td>"; echo "<td>"; area("response","25","4","",""); echo "</td>"; echo "<tr><td colspan='2' align='center'>"; submit("Kirim","Ulang",""); echo "</td></tr>"; echo "</table>"; formend(); echo "</div>"; echo "<div style=\"position:absolute; top:65%; left:30%;\">"; if($_POST){ $tanggal=date('Y-m-d H:i:s'); include "../learn_funct.php"; sisip("konsultasi_jawab","$_GET[idQ]","$_POST[response]","$_POST[responder]","$tanggal","","","",""); echo "<p align='center'><a href='../default.php?pageId=2&bab=$_GET[bab]'>Kembali</a></p>"; } echo "</div>"; headend(); ?>

Penjelasan :

Melalui response.php, semua jawaban atas pertanyaan di dalam halaman

forum akan direkam dan ditampilkan menyesuaikan dengan bab

pembahasan. Disertai dengan nama penjawab dan tanggal jawaban forum.

e. Desain halaman ujian

Halaman ini memuat ujian mata pelajaran Teknologi Informasi dan

Komunikasi (TIK). Pertanyaan yang ada bersifat random atau acak,

sehingga ketika melakukan ujian, siswa satu dengan yang lain memiliki

soal yang berbeda satu dengan yang lainnya. Desain halaman ujian secara

umum adalah sebagai berikut :

69

Gambar 3.9. Desain halaman ujian

Nama halaman : tryout1.php

Fungsi :

Menampilkan soal yang di masukan oleh administrator sehingga dapat di

jawab oleh siswa yang telah login.

Listings :

<?php include "../check_sess.php"; include "htmltag.php"; $nis=$_SESSION['nis']; $nama=$_SESSION['uname']; include "../Connections/koneksi.php"; include "../learn_funct.php"; echo "<h4>Nomor Induk: $nis : $nama</h4>"; $content=nilaiBab("$nis"); $query=mysql_query("SELECT tanggal FROM skor WHERE nis='$nis' && bab='$content[1]' LIMIT 1") or die (mysql_error()); $tanggal=mysql_fetch_row($query); if($tanggal[0]==date('Y-m-d')){ echo "Besok "; echo "<hr />"; exit(); }else{ echo "sekarang"; echo "<hr />"; include "tryout2.php"; } //headend(); ?>

Pertanyaan

Jawaban A A

Jawaban B B

Jawaban C C

Jawaban D D

70

Penjelasan :

Melalui halaman tryout1.php, soal ujian yangdijawab oleh siswa akan

terekam ke dalam basis data perolehan nilai.

f. Desain Halaman Administrator

Halaman ini merupakan halaman khusus yang digunakan untuk melakukan

pengelolaan website secara mendalam. Hak akses pengelolaan website ini

hanya dipegang oleh administrator. Desain halaman administrator adalah

sebagai berikut :

Gambar 3.10. Desain halaman utama Administrator

Fungsi :

Mengelola isi website secara menyeluruh. Desain ini merupakan desain

tampilan halaman administrator secara umum, dimana setiap menu yang

ada memiliki halaman tersendiri.

Input jejak pendapat

Input Soal online

Laksanakan !

Laksanakan !

Aktifasi soal online

Input tutorial

Laksanakan !

Laksanakan !

Nilai perolehan tes online

Unggah berkas

Laksanakan !

Kelola konten

Keluar dari System

Laksanakan !

Laksanakan !

Laksanakan !

71

Listings :

<?php include "verivy.php"; include "htmltag.php"; headstart(); echo "<div style=\"position:absolute; top:15%; left:35%;\">"; echo "<table>"; echo "<tr>"; echo " <td>"; echo "Input Jajak Pendapat"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='pool/fill1.php'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo " <td>"; echo "Input Soal Online"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='soal/fill1.php'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo " <td>"; echo "Aktifasi Soal Online"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='soal/aktivasiSoal.php'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo " <td>"; echo "Input Tutorial"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='miniblog/'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo " <td>"; echo "Nilai Perolehan Tes Online"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='soal/nilai1.php?page=1'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo " <td>"; echo "Unggah berkas"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='files/upload.php'\">"; echo " </td>"; echo "</tr>"; echo "<tr>"; echo "<tr>"; echo " <td>"; echo "Kelola Konten"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='content.php?c=&stafrom=0'\">"; echo " </td>"; echo "</tr>"; echo " <td >"; echo "Keluar Dari System"; echo " </td>"; echo " <td>"; echo "<input type='button' value='Laksanakan!' onClick=\"parent.location.href='../getOut.php'\">"; echo " </td>"; echo "</tr>"; echo "</div>"; headend(); ?>

72

D. PERANCANGAN JARINGAN

1. Kebutuhan Alat

Jaringan yang digunakan adalah Local Area Network (LAN) laboratorium

komputer dan multimedia di SMPN 3 Mandiraja. Rincian alat yang digunakan

adalah sebagai berikut :

1. 1 unit komputer server dan 10 Unit komputer client dengan NIC onboard

2. Tang crimping

3. Kabel Unshielded Twisted Pair (UTP) dan konektor RJ-45

4. Network Cable tester

5. Switch 16 port

Kabel UTP disusun membentuk susunan kabel straight dan kemudian di pres

dengan konektor RJ-45 menggunakan tang crimping, sehingga tercipta satu

media serat penghantar data dari komputer ke Switch.

2. Layout Jaringan

Rancangan letak atau layout jaringan yang digunakan adalah memakai

jaringan komputer client-server dimana satu komputer bertindak sebagai

server dan yang lainnya sebagai client menggunakan topologi star dengan

penampang layout sebagai berikut :

73

Gambar 3.11. Layout jaringan komputer

Pengalamatan IP (Internet Protocol) untuk masing-masing komputer

menggunakan kelas C karena jaringan yang digunakan merupakan jaringan

dalam ruang lingkup kecil sehingga jumlah host ID yang dibutuhkan tidak

terlalu banyak. Network ID yang digunakan adalah 192.168.10.XXX.

rincian pengalamatan komputer diatas dapat dilihat pada tabel dibawah ini :

Server

Client 2

Client 3 Client 4

Client 5 Client 6

Client 7 Client 8

Client 9 Client 10

Client 1

switch Kabel UTP & RJ-45 Connector

Kabel

UTP &

RJ-45

Connector

74

Tabel 3.13. Tabel IP Address jaringan LAN Lab. Komputer

No Nama komputer IP Address Subnet mask Default

gateway

1 server 192.168.10.1 255.255.255.0 192.168.10.1

2 Client 1 192.168.10.2 255.255.255.0 192.168.10.1

3 Client 2 192.168.10.3 255.255.255.0 192.168.10.1

4 Client 3 192.168.10.4 255.255.255.0 192.168.10.1

5 Client 4 192.168.10.5 255.255.255.0 192.168.10.1

6 Client 5 192.168.10.6 255.255.255.0 192.168.10.1

7 Client 6 192.168.10.7 255.255.255.0 192.168.10.1

8 Client 7 192.168.10.8 255.255.255.0 192.168.10.1

9 Client 8 192.168.10.9 255.255.255.0 192.168.10.1

10 Client 9 192.168.10.10 255.255.255.0 192.168.10.1

11 Client 10 192.168.10.11 255.255.255.0 192.168.10.1

Gambar di bawah ini merupakan gambar letak komputer yang terdapat

pada lab. Komputer SMPN 3 Mandiraja :

Gambar 3.12. Penataan Lab komputer SMPN 3 Mandiraja

3. Uji Koneksi Jaringan

Setelah seluruh peralatan terpasang dan IP Address sudah di masukkan,

maka langkah berikutnya yaitu uji koneksi jaringan untuk memastikan

75

jaringan yang terpasang telah terkoneksikan dengan baik. Langkah uji

koneksi jaringan yang harus dilakukan adalah sebagai berikut :

a. Menekan menu Start-Run

b. Mengetik CMD pada tag menu Run untuk masuk ke command-

prompt sebagai interface uji koneksi jaringan.

c. Untuk mengetahui Ip address komputer yang digunakan, ketik

perintah ipconfig pada prompt. Tampilan CMD setelah

menerima perintah ipconfig adalah sebagai berikut :

Gambar 3.13. perintah ipconfig

d. Ketik perintah ping diikuti oleh IP address komputer lain yang

ingin di uji koneksi jaringannya seperti gambar di bawah ini :

Gambar 3.14. Tampilan ping pada CMD

76

e. Apabila muncul keterangan seperti di bawah ini setelah diketik

ping IP adrress dan tekan enter, maka koneksi jaringan sudah

berjalan dengan baik.

Gambar 3.15. Tampilan koneksi jaringan berhasil

E. PENGUJIAN PERANGKAT LUNAK

Pengujian merupakan bagian yang tidak terpisahkan dari perangkat

lunak. Proses pengujian juga mempengaruhi masa penggunaan perangkat

lunak. Semakin terperinci proses pengujian yang dilakukan, semakin lama

rentang waktu yang akan diperlukan pada suatu pemeliharaan perangkat

lunak dan untuk proses selanjutnya. Pengujian perangkat lunak dilakukan

pada setiap tahapan pengembangan hingga pada pemeliharaan perangkat

lunak. Cara pandang terhadap perangkat lunak berkembang menjadi lebih

konstruktif. Pengujian tidak lagi dipandang sebagai aktivitas yang hanya

dilakukan setelah pengodean perangkat lunak selesai dengan batasan sebagai

pendeteksi kegagalan perangkat lunak, malainkan sebagai aktivitas yang

menuntun keseluruhan proses pengembangan perangkat lunak dan

pemeliharaan. Pengujian pun menjadi bagian penting dari suatu konstrukki

perangkat lunak. Berdasarkan standar IEEE, pengujian perangkat lunak

77

memiliki pengertian aktivitas yang dilakukan untuk mengevaluasi kualitas

produk dan untuk mengembangkannya dengan mengidentifikasi kelemahan

dan permasalahan yang terjadi. Definisi secara umum adalah “Software

testing consist of the dynamic verification of the behavior of program on a

finite set of test cases, suitably selected from the usually infinite executions

domain, against the expected behavior”(Pengujian perangkat lunak terdiri

dari verifikasi dinamis perilaku program pada sekumpulan kasus-kasus

pengujian yang terbatas, pada umumnya dipilih dengan tepat dari domain

eksekusi yang tak terbatas, dan berlawanan dengan perilaku yang

diharapkan). Pengujian yang digunakan adalah white box testing. white box

testing adalah pengujian yang dilakukan sampai pada level detil dari suatu

perangkat lunak yaitu source code. Secara umum, pengujian ini memiliki

beberapa karakteristik, yaitu :

Metode mendesain kasus uji dengan menggunakan struktur kontrol

dari desain prosedural (fungsi-fungsi) untuk membuat kasus uji

SW Engineer harus dapat membuat kasus uji yang menjamin semua

aliran modul yang independen minimal diuji sekali

Menguji semua putusan lojik (logical decisions) pada ruang lingkup

yang benarnya dan yang salah

Menguji semua perulangan (looping) dalam ruang lingkupnya dan

ruang operasinya

Menguji struktur data internal untuk memastikan validitasnya

78

Pengujian ini nantinya akan berkorelasi dengan SDLC metode

waterfall yang digunakan sebagai analisis sistem. Karena di dalam flowchart

yang sesuai dengan metode waterfall, terdapat langkah testing (pengujian)

sebelum proses implementasi.

bab iii perancangan program a. perancangan dan …

Documents