BAB 3
PERANCANGAN SISTEM
Html editor adalah aplikasi yang digunakan untuk membuat ataupun mengolah halaman web berupa file dengan ekstensi .html atau .htm. Untuk lebih jelasnya berikut
adalah langkah-langkah yang dibuat oleh penulis dalam membuat perancangan aplikasi Editor HTML tersebut.
3.1 Gambaran Umum Perancangan Sistem
Perancangan sistern merupakan salah satu unsur atau tahapan dan keseluruhan pembangunan sistem komputerisasi. Perancangan sistem untuk pengembangan sistem
memerlukan jangka waktu yang lebih lama dari pada pemecahan masalah pada umumnya. Salah satu unsur pokok yang harus dipertimbangkan dalam pembangunan
sistem komputerisasi yaitu masalah perangkat lunak, karena perangkat lunak yang digunakan haruslah sesuai dengan masalah yang akan diselesaikan, disamping
masalah perangkat itu sendiri.Inti dari perancangan sistem adalah berusaha memandang seluruh pengolahan secara terpadu serta untuk menilai pilihan-pilihan
dalam rnelaksanakan studi kelayakan.
Universitas Sumatera Utara
Sebelum melakukan peracangan sistem aplikasi , maka harus dilakukan analisis sistem terlebih dahulu untuk memperoleh gambaran yang jelas mengenai
kelebihan dan kekurangan aplikasi yang sedang berjalan. Berikut ini merupakan gambaran aplikasi yang dibuat oleh penulis.
Membuat Gambaran Editor
Gambar 3.1 Tampilan untuk jendela editor
gambar 3.2 Halaman Utama
Universitas Sumatera Utara
Menu ToolBar
Tab text
Text Editor
N O
B A
R I
S
Browser
Gambar 3.3 Halaman editor yang akan dibuat
Halaman editor yang akan dibuat itu adalah gabungan antara gambar 3.1 dang gambar 3.2 dengan tab page yang berfungsi sewaktu kita mengedit ataupun membuka lebih
dari satu file yang akan kita edit.
Universitas Sumatera Utara
3.2 Flowchar dari Sistem
1. Flowchart halaman Menu Utama
START TAMPILAN
MENU
FILE
ABOUT NEW
NO YES
PROSEDUR MEMBUAT
HALAMAN BARU
A
CLOSE EXIT
OPEN
NO YES
NO PROSEDUR
MEMBUKA FILE
B NO
YES NO
END YES
Halaman about
YES YES
NO
Gambar 3.4 Flowchart halaman utama
Universitas Sumatera Utara
2. Flowchart Menu NEW
Gambar 3.5 Flowchart Menu NEW
A
MEMBUAT KODE
HTML
SIMPAN FILE ADA
PERBAHARUI
EXIT NO
YES NO
YES
C NO
TEXT KOSONG
END
KONFIRMASI SIMPAN
NO YES
YES
NO
NO YES
YES
Universitas Sumatera Utara
3. Flowchart Menu EDIT
B
EDIT
UNDO
REDO
CLOSE TAB TEXT
BERTAMBAH BERKURANG
KONFIRMASI SIMPAN
END PERBAHARUI
FILE YANG DI EDIT
NO
NO
NO
YES YES
YES
NO NO
NO YES
YES
NO
Gambar 3.6 Flowchart Menu EDIT
Universitas Sumatera Utara
3.3 Algoritma Pemrograman Sistem
Algoritma adalah langkah-langkah penyelesaian dari suatu permasalahan dengan menggunakan kalimat logika yang diterima dalam membuat program. Algoritma
Aplikasi Editor HTML adalah sebagai berikut:
a. Menampilkan MENU utama Membuka program, maka menu utama akan secara langsung ditampilkan pada
aplikasi editor HTML, dimana menu utama terdiri dari: 1. File
2. Edit 3. View
4. Editor
b. Bekerja dengan halaman Aplikasi Editor HTML Langkah 1: Membuka halama baru
Pilih Menu File New CTRL+N Langkah 2: Mengetikkan kode HTML
Langkah 3: Menyimpan kode HTML yang kita buat pilih Menu FileSaveCTRL+S
Universitas Sumatera Utara
Langkah 4: Melihat hasil dari kode HTML yang kita buat 1. Melihat kode program sama hasil dari kode HTML tersebut
Pilih Menu viewEksekusiF5 2. Melihat hasil dari kode HTML
Pilih tombol Hasil pada Menu toolbar Langkah 5:Menutup Tab yang terbuka
1. Menutup tab editor dari menu Pilih Menu FileClose TabCTRL+SHIF+X
2. Menutup tab editor menggunkan tombol Pilih tab yang akan ditutup Tombol close tab
c. Menutup program Langkah 1: FileexitALT+F4
3.4 Pembuatan Aplikasi berdasarkan Flowchart dan Algoritma