Gambaran Umum Perancangan Sistem Algoritma Pemrograman Sistem

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 FileSaveCTRL+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 viewEksekusiF5 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 FileClose TabCTRL+SHIF+X 2. Menutup tab editor menggunkan tombol Pilih tab yang akan ditutup Tombol close tab c. Menutup program Langkah 1: FileexitALT+F4

3.4 Pembuatan Aplikasi berdasarkan Flowchart dan Algoritma