124
PEMBANGUNGAN PERANGKAT LUNAK WEB LIVE EDITOR
Dhanny Setiawan, Christian Dimas
Sekolah Tinggi Manajemen Informatika dan Komputer LIKMI Jl. Ir. H. Djuanda 96 Bandung 40132
Email : dhanny2882@gmail.com
ABSTRAK
Sebuah website dapat dibentuk dan dibuat sesuai dengan keinginan pengguna, sehingga sebuah website memiliki berbagai macam jenis dan tampilan, sehingga penulis tertarik untuk membuat sebuah aplikasi yang berbasis web dan dapat membantu pembuatan halaman-halaman website tersebut. Dengan menggunakan metode spiral dimana tiap fitur dari sebuah aplikasi dibuat dan dievaluasi dalam sebuah siklus, lalu dilakukan pembangungan fitur selanjutnya dalam iterasi siklus berikutnya. Lalu dengan menggunakan Brackets, yang berfungsi sebagai untuk melakukan pembuatan aplikasi berbasis website, dan menggunakan library JS seperti jQuery, TogetherJS untuk menambah fitur-fitur yang dibutuhkan dari aplikasi ini, PHP untuk melekakukan koneksi FTP, dan CSS dan library CSS seperti Bootstrap yang digunakan untuk membuat tampilan yang sesuai dengan keinginan.
1. PENDAHULUAN
Dengan meningkatnya jumlah pengguna internet, maka kebutuhan akan sebuah website pun ikut meningkat, hal ini menyebabkan peningkatan jumlah individu yang mempelajari cara kerja sebuah website dan mempelajari bagaimana cara membuat sebuah website yang sudah banyak digunakan dalam bentuk website statis maupun website dinamis. Program text editor yang dibuat ini diharapkan dapat membantu para web designer dalam pembuatan sebuah tampilan website.
2. LANDASAN TEORI
a. Object Oriented Programming (OOP)
Ada beberapa metodologi penelitian yang dapat digunakan dalam proses rekayasa perangkat lunak, salah satu metodologi penelitian yang banyak digunakan adalah Object-Oriented Programming (OOP) atau pemrograman berorientasi objek.
“Object-oriented programming is a method of implementation in which programs are organized as cooperative collections of objects, each of which represents an instance of some class, and whose classes are all members of a hierarchy of classes united via inheritance relationships” (Booch,2007:41)
Dalam buku “Object Oriented Programming, Principals and Theory – Ashu Kumar” dijelaskan bahwa pemrograman berorientasi objek memiliki beberapa prinisip (Kumar, 2014:6), yaitu:
1. Data Abstraction: It is the act of representing the essential feature without including the background detail.
2. Modularity: It is the process of dividing the program into various modules (part).
3. Polymorphism: It is process of using any thing (function, operator, constructor) for more than one purpose with the same identity (name). When the same identifier is used for more than one purpose it causes to overload and the system finds the best match for the overloaded identity.
4. Inheritance: It is a process of inheriting (linking) the data from one class to another class instead of creating it again.
5. Data Encapsulation: Wrapping up of data and function into a single unit is called data encapsulation of binding the function (behavior) and data members (raw material) into a single structure is called data encapsulation. b. Unified Modeling Language (UML)
Apabila pembuat perangkat lunak menggunakan metode OOP maka pembuat tersebut harus membuat sebuah notasi untuk pemodelan sebuah perangkat lunak,
notasi yang digunakan untuk pemodelan perangkat lunak dengan metode OOP disebut Unified Modeling Language (UML).
UML merupakan sebuah notasi yang terdiri dari sangat banyak diagram yang kompleks, beberapa diagram yang sering digunakan adalah:
1. Use Case Diagram: diagram yang digunakan untuk menggambarkan interaksi antara sistem dengan sistem lain maupun dengan pengguna.
2. Class Diagram: diagram yang digunakan untuk memperlihatkan class object secara dan interaksi antar class object dalam sistem.
c. Website
Website adalah sebuah lokasi / tempat dalam jaringan internet yang berisi informasi tentang suatu hal, dan biasanya terdiri dari beberapa Web Pages dan di hubungkan melalui Hyperlinks. Sebuah halaman website yang dapat diakses melalui internet adalah halaman website yang telah di upload ke sebuah server yang telah memiliki alamat domain, proses upload ini menggunakan sebuah protokol yang disebut dengan File Transfer Protocol (FTP). Halaman web yang telah di upload ke server menggunakan protokol tersebut dapat diakses menggunakan webbrowser pada device yang digunakan user. Proses akses sebuah website itu adalah, saat seorang user melakukan akses ke alamat domain sebuah website, server akan mengirimkan halaman website tersebut ke web browser pengguna melalui sebuah protokol yang disebut dengan Hyper Text Transfer Protocol (HTTP).
Website termasuk dalam jenis website dinamis jika sebuah halaman website terdiri dari bagian – bagian terpisah yang dibuat / dirangkai saat web server mendapat request dari client web browser. Website dinamis dapat berubah tanpa adanya perubahan dalam file HTML atau CSS nya.
Sebuah website dinamis sendiri dapat dibagi menjadi 2 bagian, yaitu : 1. Front end sering juga disebut sebagai User Interface/User Experience
(UI/UX) dari sebuah website. Front end sebagai tampilan antarmuka adalah sebuah bagian yang menghubungkan pengguna dengan back end.
ini akan bekerja sama untuk memproses dan menyimpan data – data yang telah diinput pada bagian Front end.
d. Front End Development
Front end adalah bagian yang tampil saat sebuah website diakses, bagian ini merupakan bagian dalam sebuah website statis maupun dinamis. Proses perancangan hingga pembuatan sebuah Front end dibagi menjadi 3 bagian yaitu Wireframing, Design dan Coding atau Front end development itu sendiri. Proses Wireframing dibutuhkan sebuah perangkat lunak berjenis Web Prototyping tools, perangkat lunak ini biasanya berisi komponen–komponen umum dalam sebuah website, seperti layout grid, button, search bar, navigation bar, dll yang dapat diletakkan dalam sebuah canvas untuk menentukan gambaran kasar tentang posisi–posisi komponen pada sebuah halaman website.
Setelah pembuatan website selesai, maka akan dibutuhkan proses hosting. Proses hosting adalah sebuah proses dimana semua file yang berkaitan dengan website tersebut, seperti HTML, CSS, JS, dan PHP di upload ke sebuah web server, agar website ini dapat diakses. Dalam proses ini biasanya sebuah perangkat lunak yang digunakan adalah perangkat lunak FTP. Contoh perangkat lunak FTP yang sering digunakan adalah FileZilla.
e. Back End Development
Back end adalah bagian yang melakukan semua proses logika yang berhubungan input yang dimasukkan oleh pengguna lewat bagian front end, dan sekaligus mengirim output yang nantinya akan ditampilkan oleh bagian front end ke pengguna. Sebuah back end biasanya terdiri dari 3 bagian, yaitu aplikasi, database, dan server.
Sebuah back end biasanya terdiri dari 3 bagian, yaitu aplikasi, database, dan server. Saat seorang pengguna melakukan input lewat front end, input tersebut akan diproses oleh aplikasi lalu dimasukkan ke dalam database yang terdapat di sebuah server, apabila pengguna melakukan akses ke halaman web yang sama
data – data yang telah tersimpan di database akan dipanggil oleh aplikasi dan ditampilkan ke bagian front end.
f. Web Development Tools
Pengertian dari aplikasi berbasis web dikutip dari buku “PHP & MySQL For Dummies, 3rd Edition – Janet Valade” adalah :
“An application is a program or a group of programs designed for use by an end user (for example, customers, members, or circus acrobats). If the end user interacts with the application via a Web browser, the application is a Web based or Web application.” (Valade, 2006:10)
Dari kutipan tersebut, dapat disimpulkan bahwa aplikasi berbasis web merupakan sebuah perangkat lunak yang digunakan melalui sebuah Web browser. Bahasa pemrograman yang dapat menjadi logika dalam aplikasi berbasis web dibagi menjadi 2 yaitu client-side scripting dan server-side scripting. Sebuah client-side scripting adalah jenis bahasa pemrograman yang mengatur logika dalam sebuah halaman web dan berjalan di device yang digunakan untuk mengakses website tersebut. Sedangkan server-side scripting adalah bahasa pemrograman yang mengatur logika dan pengolahan data yang tidak berjalan di device yang digunakan untuk mengakses website tersebut, melainkan berjalan dalam sebuah web server.
g. Hyper Text Markup Language (HTML)
Dikutip dari buku “Beginning HTML & CSS – Rob Larsen” pengertian dari bahasa HTML adalah:
“HTML is needed to explain the structure of a web page. This page is made up of a lot of words. On web pages, it is the job of HTML to explain the structure of the words—which words form a heading, where paragraphs start and end, and which text should have bullet points. This language also specifies things such as the links between different web pages, where images should appear, where videos should appear, and forms for entering text.” (Larsen,2013:xxxiii)
Dapat disimpulkan dari kutipan tersebut, HTML merupakan bahasa pemrograman yang digunakan untuk membentuk rangka, dan meletakkan elemen-elemen yang membangun sebuah halaman web.
h. Cascading Stylesheet (CSS)
Dikutip dari penjelasan Rob Larsen dalam bukunya yang berjudul “Beginning of HTML and CSS” CSS dapat diartikan sebagai berikut:
“CSS is used to control how your pages look. For example, you can use CSS to specify that a typeface should be a large, bold Arial typeface or that the background of a page should be a light green. You can also use CSS to control where different items appear on a page, such as placing three columns of text next to each other.” (Larsen,2013:xxxiii)
Jadi bisa disimpulkan dari kutipan tersebut, bahwa CSS memiliki fungsi untuk memodifikasi bagaimana sebuah komponen yang telah didefinisikan dalam HTML tampil pada web browser, mulai dari jenis font, warna background, dan masih banyak lagi.
Dalam CSS, tiap komponen HTML memiliki sebuah kerangka yang disebut dengan box model, sebuah box model memiliki beberapa bagian, yaitu margin, border, padding, dan content dari HTML object itu sendiri.
i. JavaScript (JS)
JavaScript adalah salah satu contoh bahasa pemrograman berjenis client-side scripting, JavaScript sering digunakan dalam pembuatan sebuah website dan aplikasi berbasis web, karena JavaScript merupakan suatu bahasa pemrograman yang mengatur logika dalam sebuah website maupun aplikasi berbasis web.
j. Bootstrap
Dikutip dari halaman web resmi Bootstrap, pengertian dari Bootstrap adalah: “Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects for the web.”(www.getbootstrap.com)
Bisa disimpulkan dari kutipan diatas bahwa, Bootstrap adalah sebuah framework yang digunakan dalam bahasa HTML, CSS, dan JS untuk membuat
sebuah halaman web yang responsive, dimana sebuah halaman web yang responsive adalah sebuah halaman web yang dapat menyesuaikan tampilannya saat diakses dari berbagai macam device dengan ukuran layar berbeda beda. k. Asynchronus JavaScript and XML (AJAX)
AJAX bukanlah sebuah bahasa tersendiri melainkan sebuah teknik pemrograman yang menggunakan bahasa JS dan berfungsi untuk melakukan proses request secara Asynchronus (dalam background), dan memberikan respon berupa data XML, yang akhirnya ditampilkan dalam dokumen HTML di bagian tertentu tanpa perlu mengakses seluruh halaman web tersebut, dengan adanya JavaScript Object Notation (JSON), teknik ini memiliki sebuah jenis lain yang disebut dengan Asynchronus JavaScript and JSON (AJAJ) dimana respon yang diberikan berupa JSON object
l. PHP
PHP adalah salah satu bahasa pemrograman yang sering digunakan untuk pembuatan sebuah website dinamis, dan juga aplikasi berbasis web. Pengertian PHP dikutip dari buku “PHP: The Good Parts - Peter B. MacIntyre”, bahasa pemrograman PHP di definisikan sebagai berikut:
“It is a scripting language, mostly used on the server side, that can be employed to generate Hypertext Markup Language (HTML) information dynamically.” (MacIntyre, 2010:2)
Dapat disimpulkan bahwa, bahasa pemrograman PHP merupakan bahasa pemrograman yang digunakan pada sebuah web server yang berguna untuk membuat sebuah dokumen HTML pada saat sebuah website diakses.
3. Analisa dan Perancangan
Aplikasi ini berbasis web, sehingga pengguna hanya membutuhkan sebuah web browser untuk menjalankannya. Pada halaman awal, pengguna akan diarahkan pada halaman utama yang berisi navbar yang menjadi tempat untuk tombol new dan FTP, dimana tombol new berfungsi untuk melakukan pembuatan dokumen HTML dan CSS baru, dan FTP digunakan untuk melakukan proses upload ke hosting yang dapat ditentukan pengguna.
Selain terdapat navbar, dalam halaman utama terdapat dua buah editor yang digunakan pengguna untuk melakukan input kode HTML dan CSS yang diinginkan. Tiap editor memiliki 2 buah tombol, yaitu save dan load, tombol save digunakan untuk melakukan penyimpanan kode kode yang telah di masukkan kedalam editor oleh pengguna, sedangkan tombol load digunakan untuk membuka file HTML atau CSS dan memasukkan isi file tersebut kedalam kotak editor. Di bawah kedua kotak editor ini terdapat sebuah komponen iframe, dimana semua kode yang diketik ke dalam kotak editor akan secara real-time di tampilkan hasilnya di dalam komponen iframe ini.
a. Analisis Kebutuhan Fungsional
Aplikasi yang dibuat harus memiliki fitur berikut ini : 1. Dapat dijalankan pada sebuah web browser.
2. Menyediakan iFrame untuk tempat preview render script HTML dan CSS. 3. Menyediakan tombol new untuk membuat file HTML dan CSS baru. 4. Menyediakan tombol save untuk menyimpan file HTML dan CSS.
5. Menyediakan tombol load pada tiap editor, untuk menampilkan file CSS atau HTML dari pengguna.
6. Menyediakan tombol FTP untuk mengaktifkan fungsi FTP.
7. Menyediakan tombol collaborate untuk mengaktifkan fitur collaborate. b. Analisis Kebutuhan Non-Fungsional
Kebutuhan Non-Fungsional dari aplikasi ini adalah:
1. Perangkat Lunak Perangkat Lunak yang digunakan dalam pembuatan aplikasi ini adalah:
a. Sebuah web browser.
b. HTML, CSS, JavaScript, dan jQuery untuk bahasa pemrograman. c. Brackets untuk pembuatan aplikasi.
2. Perangkat Keras
Perangkat keras berupa komputer yang mendukung system operasi Windows
c. Usecase
d. Class Diagram
Gambar 3. 1
Usecase Use Case Diagram Sistem Aplikasi Web Live Editor
Gambar 3. 2
e. Perancangan Antarmuka
Gambar 3.3 merupakan rancangan antar muka halaman utama yang berisi dengan beberapa komponen, yaitu:
1. Tombol ‘new’ untuk membuat dokumen baru.
2. Tombol save untuk menyimpan script dari semua textarea. 3. Tombol FTP untuk menampilkan modal FTP info.
4. Tombol collaborate untuk mengaktifkan fungsi kolaborasi, dimana aplikasi ini dapat digunakan oleh lebih dari 1 user dalam sebuah dokumen yang sama. 5. Tombol Load HTML untuk menampilkan script HTML dari sebuah file yang
di upload oleh user.
6. Tombol Load CSS untuk menampilkan script CSS dari sebuah file yang di upload oleh user.
7. Tombol Save HTML untuk menyimpan script HTML ke sebuah file. 8. Tombol Save CSS untuk menyimpan script CSS ke sebuah file.
9. Tombol I untuk memberikan tag <em> dan </em> di dalam texarea HTML. Gambar 3. 3
10. Tombol B untuk memberikan tag <strong> dan </strong> di dalam texarea HTML.
11. Tombol U untuk memberikan tag <u> dan </u> di dalam texarea HTML. 12. Textarea HTML sebagai tempat untuk melakukan input script HTML yang
secara otomatis di tampilkan ke Target Frame.
13. Textarea CSS sebagai tempat untuk melakukan input script CSS yang secara otomatis di tampilkan ke Target Frame.
14. Target Frame sebagai tempat untuk menampilkan hasil dari script HTML dan script CSS dari textarea.
4. Kesimpulan
Dari penulisan Tugas Akhir ini, ada beberapa hal yang dapat disimpulkan penulis, yaitu:
1. Aplikasi yang dibuat adalah sebuah aplikasi berbasis web. Dimana aplikasi ini tidak perlu melalui proses instalasi di setiap device, tetapi dapat dengan mudah digunakan melalui web browser yang ada pada device pengguna.
2. Aplikasi dapat membantu pembuatan sebuah halaman website. Dengan fitur-fitur yang ada pada aplikasi ini, pembuatan halaman website akan semakin mudah karena dapat didukung dengan fitur seperti livereload, FTP, dan collaborate. 3. Aplikasi dapat menampilkan hasil script HTML dan CSS secara real time.
Dengan adanya fitur ini, user dapat membuat sebua halaman website dengan lebih mudah, karena tidak diperlukan untuk berpindah window dan melakukan refresh pada web browser untuk melihat hasil dari script HTML dan CSS yang telah user buat.
4. Aplikasi dapat digunakan dengan mudah, karena memiliki UI/UX yang simple. Semua tombol telah diberikan label atau icon yang jelas untuk mewakili fungsi-fungsi dari tombol yang bersangkutan, sehingga mempermudah penggunaan aplikasi ini.
5. Aplikasi menyediakan fitur FTP agar memudahkan proses upload script HTML dan CSS yang telah dibuat ke hosting.
Aplikasi menyediakan fitur collaborate yang digunakan untuk mempercepat pembuatan halaman web dengan cara melakukan proses coding bersamaan dengan lebih dari satu user lain pada saat bersamaan.
Daftar Pustaka
1. Booch, Robert, dkk., 2007, “Object-Oriented Analysis and Design with Applications”, Addison – Wesley Professional.
2. Kumar, Ashu, 2014, “Object Oriented Programming, Principals and Theory”, Ashu Kumar Publisher.
3. Bell, Douglas, 2005, “Software Engineering For Students 4th Edition”, Longman Group United Kingdom
4. Servaas, Quentin, 2007, “Practical Web 2.0 Applications with PHP”, Apress 5. Valade, Janet, 2006, “PHP & MySQL for Dummies, 3rd Edition”, Wiley 6. Doyle, Matt, 2011, “Beginning PHP 5.3”, Wrox
7. Larsen, Rob, 2013, “Beginning HTML and CSS”, Wrox.
8. http://www.getbootstrap.com/, diakses tanggal 9 Oktober 2015, jam 15:00 WIB
