Implementasi Node JS, Ajak, dan HTML5 Pada Pembangunan Aplikasi Real Time Presentation Untuk Seminar Online

F-1

BIODATA

Data Pribadi :

Nama : Angga Nugraha

Tanggal Kelahiran : 19 Januari 1992 Tempat Kelahiran : Bandung Jenis Kelamin : Laki-Laki

Agama : Islam

Alamat : Jln.Desa Cipadung No.73 Rt/Rw: 02/04 Kel. Cipadung, Kec.Cibiru - Bandung.

Kode Post : 40614

Nomor Telepon : 0859 7401 4224

Email : annu.nura@gmail.com

Riwayat Pendidikan dan Pelatihan :

1998 - 2004 : SDN Karang Mulia III Bandung 2004 - 2007 : SMP N 41 Bandung

2007 - 2010 : SMK Taruna Ganesha Bandung

Jurusan Rekayasa Perangkat Lunak (RPL) 2011 - 2016 : Universitas Komputer Indonesia (UNIKOM)

SKRIPSI

Diajukan untuk Menempuh Ujian Akhir Sarjana

ANGGA NUGRAHA

10111655

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS KOMPUTER INDONESIA

2016

iii

KATA PENGANTAR

Dengan memanjatkan puji syukur khadirat Allah SWT yang telah memberikan taufik dan hidayahnya kepada kita semua sehingga penulis dapat menyelesaikan penelitian tugas akhir yang berjudul “Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan Aplikasi Real-Time Presentation Untuk Seminar Online”.

Penulis juga memahami akan segala kekurangan yang ada dalam penyusunan penelitian tugas akhir ini, akan tetapi hal ini dapat teratasi dengan adanya bantuan serta bimbingan dari berbagai pihak yang terkait sehingga selesai penelitian tugas akhir ini maka penulis juga tidak menutup kemungkinan kritik dan saran yang bersifat membangun dapat menambah kesempurnaan penelitian tugas akhir ini.

Tidak lupa penulis juga ingin mengucapkan banyak terima kasih dan penghargaan yang setinggi-tingginya kepada pihak-pihak yang telah mendukung penulis dalam proses penelitian tugas akhir ini, adapun pihak-pihak tersebut adalah sebagai berikut :

1. Kedua orang tua tercinta, serta keluarga besar yang telah memberikan do’a, semangat dan dukungan yang tidak pernah terhenti, sehingga penulis selalu bersemangat dan termotivasi dalam menyelesaikan penelitian tugas akhir ini. 2. Ibu Gentisya, S.Kom., M.Kom. selaku dosen wali dari kelas IF14 angkatan

2011.

3. Bapak Eko Budi Setiawan, S.Kom., M.T. selaku dosen pembimbing dalam penelitian tugas akhir ini.

4. Bapak Angga Setiyadi, S.Kom., M.Kom selaku reviewer dalam penelitian tugas akhir ini.

5. Ibu Raenie (Ibu Een) dan Yanti Andini yang telah bersedia untuk mengijinkan penulis melakukan penelitian di TIENS Group, dan juga telah membantu penulis dalam menyediakan segala keperluan yang digunakan dalam penelitian ini.

6. Seluruh staf dan member TIENS Group yang ikut terlibat dalam penelitian tugas akhir ini yang tidak dapat penulis sebutkan namanya satu persatu.

iv

7. Teman-teman seperjuangan yang juga melaksanakan penelitiannya dibawah bimbingan Bapak Eko Budi Setiawan, S.Kom., M.T. yang namanya tidak dapat penulis sebutkan satu persatu.

8. Seluruh sahabat di kelas IF14 angkatan 2011 yang telah berjuang bersama, menyemangati, dan saling membantu dalam segala hal hingga penulis mampu untuk mencapai ke titik ini.

9. Mitra bisnis dan teman kerja, teman-teman di komunitas, juga sahabat-sahabat musisi yang telah memberikan dukungan kepada penulis untuk dapat menyelesaikan penelitian tugas akhir ini.

10.Seluruh pihak yang terlibat dan selalu memberikan dukungan dan membantu dalam berbagai hal sehingga penulis dapat menyelesaikan penelitian tugas akhir ini.

Demikian laporan hasil penelitian ini penulis buat dengan sebenarnya, semoga laporan ini dapat bermanfaat khususnya kepada diri penulis sendiri dan umumnya bagi yang membacanya.

Bandung, 25 Agustus 2016

v

DAFTAR ISI

ABSTRAK ... i

ABSTRACT ... ii

KATA PENGANTAR ... iii

DAFTAR ISI ... v

DAFTAR GAMBAR ... ix

DAFTAR TABEL... xii

DAFTAR SIMBOL ... xv

DAFTAR LAMPIRAN ... xix

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 2

1.3 Maksud dan Tujuan ... 3

1.4 Batasan Masalah ... 3

1.5 Metodologi Penelitian ... 4

1.5.1 Metode Pengumpulan Data ... 4

1.5.2 Tahap Pembangunan Perangkat Lunak ... 5

1.6 Sistematika Penulisan ... 7

BAB II TINJAUAN PUSTAKA ... 9

2.1 Ruang Lingkup Objek Penelitian ... 9

2.1.1 Sejarah Tiens Group Co,. Ltd ... 9

2.1.2 Logo Perusahaan ... 10

2.1.3 Visi dan Misi ... 11

vi

2.2.1.3 Kelebihan Webinar ... 14

2.2.2 Javascript ... 15

2.2.2.1 Sejarah Javascript ... 15

2.2.2.2 Javascript Event ... 16

2.2.2.3 Contoh Javascript ... 17

2.2.3 HTML5 ... 18

2.2.3.1 Sejarah HTML5 ... 19

2.2.3.2 Contoh HTML5 ... 20

2.2.4 AJAX (Asynchronus Javascript and XML) ... 20

2.2.4.1 Sejarah AJAX ... 21

2.2.4.2 Perbedaan Asynchronous & Synchronous ... 21

2.2.4.3 Contoh AJAX ... 23

2.2.5 Node.JS ... 25

2.2.5.1 Sejarah Node.JS... 25

2.2.5.2 Node Modules ... 26

2.2.5.3 Class Pada Node.JS ... 26

2.2.5.4 Databases Support... 28

2.2.6 MySQL ... 30

2.2.6.1 Contoh Query MySQL ... 32

2.2.7 UML (Unified Modeling Language) ... 32

2.2.8 Flowmap ... 36

2.2.8.1 Jenis-Jenis Flowmap ... 37

2.2.8.2 Pedoman Pembuatan Flowmap ... 38

vii

BAB III ANALISIS DAN PERANCANGAN ... 41

3.1 Analisis Sistem ... 41

3.1.1 Analisis Masalah ... 41

3.1.2 Analisis Prosedur ... 42

3.1.3 Analisis Implementasi Teknologi ... 45

3.1.3.1 Teknologi Node JS ... 45

3.1.3.2 Teknologi AJAX ... 48

3.1.3.3 Teknologi HTML5 ... 49

3.1.4 Analisis Arsitektur Sistem ... 52

3.1.4.1 Spesifikasi Perangkat Lunak ... 53

3.1.4.2 Spesifikasi Perangkat Keras ... 54

3.1.4.3 Spesifikasi Jaringan ... 54

3.1.4.4 Pemetaan Kode Program ... 55

3.2 Perancangan Sistem ... 62

3.2.1 Tujuan Perancangan Sistem ... 62

3.2.2 Gambaran Umum Usulan Sistem ... 63

3.2.3 Perancangan Prosedur Yang Diusulkan ... 63

3.2.3.1 Use Case ... 64

3.2.3.2 Activity Diagram ... 70

3.2.3.3 Class Diagram ... 75

3.2.3.4 Sequence Diagram... 75

3.2.4 Perancangan Sistem ... 80

3.2.4.1 Perancangan Struktur Tabel ... 80

3.2.4.2 Perancangan Struktur Menu ... 84

3.2.4.3 Perancangan Grafis Dan Antar Muka ... 84

BAB IV IMPLEMENTASI DAN PENGUJIAN ... 89

viii

4.1.4 Implementasi Server ... 91

4.1.5 Implementasi Basis Data ... 91

4.1.6 Implementasi Tampilan Antarmuka ... 93

4.2 Pengujian Sistem ... 94

4.2.1 Pengujian Kompatibilitas Browser ... 94

4.2.2 Pengujian Blackbox ... 95

4.2.2.1 Skenario Pengujian Blackbox ... 95

4.2.2.2 Kasus Dan Hasil Pengujian Blackbox ... 96

4.2.2.3 Kesimpulan Hasil Pengujian Blackbox ... 106

4.2.3 Pengujian Beta... 106

4.2.3.1 Wawancara Pengujian Beta Terhadap Pihak Perusahaan ... 106

4.2.3.2 Kuesioner Pengujian Beta Terhadap Peserta Seminar ... 108

4.2.3.3 Kesimpulan Hasil Pengujian Beta ... 112

BAB V KESIMPULAN DAN SARAN ... 115

5.1 Kesimpulan ... 115

5.2 Saran ... 115

117

DAFTAR PUSTAKA

[1] R. S. Pressman Dan B. R. Maxim, Software Engineering: A Practitioner’s Approach, Eight Edition, New York: Mcgraw-Hill Education, 2015.

[2] R. Setiawan, “Apa Itu Webinar (Seminar Online) Dan Manfaatnya,” [Online]. Available: http://belajarbisnisinternet.com/apa-itu-webinar-seminar-online-dan-manfaatnya/. [Diakses 05 April 2016].

[3] A. S. W, Website Super Canggih Dengan Plugin Jquery Terbaik, Jakarta: Mediakita, 2011.

[4] E. Y. Saputra, "Mengenal Javascript, Ajax, Jquery, Angularjs, Dan Node.Js," 08 April 2014. [Online]. Available: http://ekajogja.com/mengenal-javascript-ajax-jquery-angularjs-dan-node-js. [Diakses 05 April 2016].

[5] A. F. Sibero, Kitab Suci Web Programming, Yogyakarta: Mediakom, 2011. [6] G. Johnson, Programmingin Html5 With Javascript And Css3, Washington:

Microsoft Press, 2013.

[7] J. J. Garrett, “Jesse James Garrett,” 25 Februari 2005. [Online]. Available: http://adaptivepath.org/ideas/ajax-new-approach-web-applications/.

[Diakses 05 April 2016].

[8] M. I. C. R, M. Husni Dan H. Studiawan, “Implementasi Klien Sip Berbasis

Web,” Jurnal Teknik Its, Vol. 1, No. Issn: 2301-9271, 2012.

[9] A. L. Pisa, H. N. Palit Dan J. Andjarwirawan, “Pembuatan Aplikasi

Audience Response System Berbasis Web Dan Android,” Jurnal Informatika,, Vol. 13, No. Issn 1411-0105, 2015.

118

[10] C. A. Nugroho, "Apache Cassandra," 23 Desember 2013. [Online]. Available: http://noegroho.blog.amikom.ac.id/2013/12/26/apache-cassandra/. [Accessed 9 Agustus 2016].

[11] R. Fajar, "Damien Katz, Bapak Database Nosql Couchdb," 9 Mei 2016. [Online]. Available: https://www.codepolitan.com/damien-katz-database-nosql-coachdb/. [Accessed 9 Agustus 2016].

[12] W. Hastomo, “Pengertian Dan Kelebihan Database Mysql,” 24 Mei 2013. [Online]. Available: http://hastomo.net/php/pengertian-dan-kelebihan-database-mysql/. [Diakses 9 Agustus 2016].

[13] Arief, "Microsoft Sql Server 2000," 14 2013 Februari. [Online]. Available: http://informatika.web.id/microsoft-sql-server-2000.htm. [Accessed 9 Agustus 2016].

[14] L. W. A. A, "Mongodb," 17 September 2013. [Online]. Available: http://litawismaayu.blog.ugm.ac.id/2013/09/17/mongodb/. [Accessed 9 Agustus 2016].

[15] B. A. Santoso, "7 Basis Data Nosql Populer," 4 Februari 2015. [Online]. Available: https://www.codepolitan.com/7-basis-data-nosql-populer. [Accessed 9 Agustus 2016].

[16] R. P. Santi, "Instalasi Database (Postgresql Dan Postgis) Part I," 14

Desember 2013. [Online]. Available:

http://lpbd.si.fti.unand.ac.id/2013/12/instalasi-database-postgresql-dan-postgis-part-i/. [Accessed 9 Agustus 2016].

[17] K. Alman, "Database Sqlite," 27 Juni 2013. [Online]. Available: http://lpbd.si.fti.unand.ac.id/2013/06/database-sqlite/. [Accessed 9 Agustus 2016].

119

[18] A. Pratama, “Pengenalan Mysql,” 01 Februari 2013. [Online]. Available: http://ilmukomputer.org/2013/02/01/pengenalan-mysql/. [Diakses 05 April 2016].

[19] R. C. Martin, Uml For Java Programmers, New Jersey: Alan Apt, 2012. [20] S. Dharwiyanti, “Pengantar Unified Modeling Language (Uml),” 06 10

2015. [Online]. Available: http://mirror.unej.ac.id/iso/dokumen/ikc/. [Diakses 20 April 2016].

[21] J. H.M., Analisis Dan Desain Sistem Informasi: Pendekatan Terstruktur Teori Dan Praktek Aplikasi Bisnis, Yogyakarta : Andi Publisher, 1999. [22] I. Atkia, 31 Agustus 2014. [Online]. Available:

http://ihsanatkia.com/featur-lebih-dari-package-sublime-text/. [Diakses 20 April 2016].

[23] Sugiyono, Metode Penelitian Kuantitatif, Kualitatif, Dan R&D, Bandung: Alfabeta, 2011.

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Sosialisasi dan promosi merupakan suatu hal yang wajib bagi sebuah perusahaan. Begitupula dengan perusahaan internasional ternama seperti Tiens Group Co,. Ltd (Tiens Group). Perusahaan yang menjual berbagai macam obat dan alat-alat kesehatan ini tidak pernah lepas dalam kegiatan acara sosialisasi dan promosi, diantaranya adalah dengan mengadakan seminar-seminar terbuka di kota-kota di Indonesia khususnya kota Bandung.

Tiens Group rutin mengadakan seminar mingguan untuk mensosialisasikan dan mempromosikan produk-produk mereka kepada para pelanggannya. Menurut ibu Raenie, salah satu pimpinan distributor atau pemasok produk (stockist) di kota Bandung, Setiap kali mengadakan seminar dengan skala kecil, biaya yang dikeluarkan untuk menyewa ruang seminar atau gedung mencapai satu hingga dua juta rupiah untuk kapasitas kurang-lebih lima puluh orang. Sedangkan bila perusahaan ingin melakukan seminar dengan skala besar, biaya yang dikeluarkan akan jauh lebih besar lagi dikarenakan kapasitas gedung yang disewa harus dapat menampung jumlah audience hingga ratusan orang. Sehingga, setiap bulan perusahaan harus mengeluarkan biaya yang tidak sedikit dikarenakan harga sewa gedung yang cukup tinggi.

Lokasi untuk mengadakan seminar juga menjadi hal yang perlu di pertimbangkan secara matang. Pasalnya, member (orang-orang yang tergabung dalam keanggotaan pemasaran produk atau marketing) dan konsumen (orang-orang yang membeli produk Tiens) tersebar di berbagai tempat dan lokasi yang berbeda-beda. Sehingga gedung diadakanya seminar sering berpindah-pindah lokasi, hal ini dimaksudkan untuk menjangkau member dan konsumen yang berbeda di lokasi yang berbeda pula.

Permasalahan harga sewa dan lokasi gedung ini akan mempengaruhi jumlah kuota yang disediakan dan banyaknya peserta yang dapat mengikut acara seminar. Kasus yang sering terjadi diantaranya, calon peserta seminar yang

2

kehabisan kursi atau kuota, sehingga tidak dapat mengikuti seminar yang sedang diadakan. Perusahaan juga tidak dapat begitu saja menyewa sebuah gedung yang besar dengan kapasitas besar untuk menampung peserta, dikarenakan bila jumlah kuota yang disediakan perusahaan sangat banyak namun peserta yang menghadiri acara tersebut sedikit, hal ini akan merugikan pihak perusahaan yang sudah mengeluarkan banyak biaya dan waktu dalam mempersiapkan seminar tersebut.

Berdasarkan uraian dan permasalahan yang telah dipaparkan, maka diperlukan sebuah solusi alternatif untuk melaksanakan seminar secara online dan real-time. Oleh karena itu, dalam penelitian ini akan dibangun sebuah sistem yang

berjudul “Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan

Aplikasi Real-Time Presentation Untuk Seminar Online”.

Aplikasi ini akan dibangun dengan mengimplementasikan AJAX untuk request data antar client dan server, HTML5 untuk membuat tampilan antar muka lebih user-friendly, dan Node.JS untuk membuat aplikasi ini bekerja secara real-time, sehingga apa yang dilihat dan dilakukan setiap pengguna (users) dapat saling terhubung satu sama lain. Pada pelaksanaan teknisnya, aplikasi ini dapat digabungkan dengan acara seminar konvensional sebagai media alternatif untuk menyampaikan isi seminar yang diadakan secara lebih luas dan mudah.

1.2 Rumusan Masalah

Berdasarkan uraian latar belakang diatas, maka beberapa permasalahan yang dapat dirumuskan antara lain

1. Biaya sewa gedung yang tinggi untuk mengadakan acara seminar di kota Bandung.

2. Perusahaan harus mengadakan seminar yang sama berulang kali untuk menjangkau member dan konsumen yang berada di tempat atau lokasi yang berbeda-beda.

3. Terbatasnya jumlah kursi atau kuota pada gedung yang disewa, dan kerugian yang dialami perusahaan ketika peserta yang menghadiri seminar jauh lebih sedikit daripada kuota yang telah disediakan.

1.3 Maksud dan Tujuan

Adapun yang menjadi maksud dari penelitian tugas akhir ini adalah membantu pihak Marketing Tiens Group dalam menyediakan fasilitas seminar online untuk kepentingan promosi dan sosialisasi kepada member dan konsumen Tiens Group.

Sedangkan tujuan yang ingin dicapai dari penelitian ini adalah sebagai berikut:

1. Membangun aplikasi untuk presentasi secara online, sehingga perusahaan tidak perlu mengeluarkan biaya sewa gedung untuk acara seminar.

2. Memberikan kemudahan bagi perusahaan agar dapat menjangkau peserta dari berbagai tempat atau lokasi dalam satu waktu.

3. Menyediakan daya tampung peserta yang lebih dinamis, sehingga tidak akan ada peserta yang kehabisan kursi atau kuota untuk mengikuti seminar yang diadakan dan perusahaan dapat mengetahui jumlah peserta yang akan mengikuti seminar.

1.4 Batasan Masalah

Adapun yang menjadi batasan masalah dalam penelitian tugas akhir ini adalah sebagai berikut :

1. Aplikasi ini berbasis Web dan hanya dapat diakses melalui Internet Browser.

2. Aplikasi ini menggunakan HTML5 untuk menambahkan fitur Slideshow Presentation dan Video Streaming.

3. Aplikasi ini menggunakan AJAX (Asynchronous Javascript and XML) untuk request data antar client dan server.

4. Aplikasi ini menggunakan Node.JS untuk menampilkan halaman dan data secara real-time kepada pengguna dari sisi server.

5. Presentasi live video dan audio streaming hanya berjalan satu arah dari presenter ke audience.

4

6. Kecepatan koneksi Internet yang diperlukan oleh aplikasi agar dapat berjalan secara optimal adalah minimal 6 Mbps atau 0.75 MB/s.

1.5 Metodologi Penelitian

Metodologi penelitian yang digunakan pada penelitian laporan tugas akhir ini menggunakan metodologi penelitian studi kasus melalui pendekatan kualitatif. Metodologi penelitian studi kasus digunakan untuk mengetahui kesatuan sebuah sistem berupa program, kegiatan, peristiwa, atau sekelompok individu yang terikat oleh tempat ataupun waktu. Penelitian menggunakan metodologi ini dimaksudkan untuk menghimpun data, mengambil makna, dan memperoleh pemahaman dari kasus yang terjadi. Pada penelitian tugas akhir ini, studi kasus dilakukan pada acara-acara seminar yang diadakan oleh perusahaan Tiens Group yang berada di kota Bandung.

1.5.1 Metode Pengumpulan Data

Adapun teknik pengumpulan data yang akan digunakan, diantaranya : 1. Wawancara

Wawancara dilakukan dengan cara berdiskusi langsung dengan staf perusahaan yang biasa bertugas dalam mempersiapkan dan melaksanakan seminar. Serta berdiskusi langsung dengan pejabat perusahaan yang biasa menjadi pembicara seminar. Wawancara ini bertujuan untuk mencari tahu kebutuhan seperti apa yang perlu diterapkan pada sistem yang akan dibangun. 2. Observasi

Pengumpulan data melalui observasi ini adalah untuk mengetahui kebiasaan para pelaku seminar seperti pembicara dan peserta, juga untuk mengetahui peristiwa atau kejadian apa saja yang sering terjadi pada sebuah acara seminar. Observasi ini dilakukan dengan cara mengikuti langsung beberapa seminar yang diadakan perusahaan.

3. Kuesioner

Pengumpulan data melalui kuesioner diajukan kepada masyarakat atau orang-orang yang tergabung kedalam keanggotaan TIENS Group (member)

dengan tujuan untuk mencari tahu sistem seperti apa yang perlu dibangun sesuai dengan kebutuhan peserta seminar.

1.5.2 Tahap Pembangunan Perangkat Lunak

Metode yang digunakan pada sistem informasi ini adalah metode waterfall, atau sering disebut juga dengan siklus kehidupan klasik atau model air terjun. Model ini mengusulkan sebuah pendekatan kepada perkembangan yang sistematik dan sekuensial yang mulai pada tingkat dan kemajuan sistem pada seluruh analisis, desain, kode, pengujian, dan pemeliharaan. Berikut adalah tahapan pembangunan menggunakan metode waterfall.

1. Communication

Pada tahap ini, peneliti melakukan analisis masalah yang terjadi pada perusaaan Tiens Group Co,. Ltd (Tiens Group). Analisis masalah ini dilakukan dengan cara mengumpulkan data menggunakan metode wawancara dan observasi terhadap hal-hal yang berhubungan dengan penelitian ini. Tujuan pada tahapan ini adalah untuk mencari tahu permasalahan seperti apa yang terjadi pada perusahaan, serta kebutuhan seperti apa saja diperlukan perusahaan untuk menyelesaikan masalah tersebut.

2. Planning

Pada tahap ini, peneliti merumuskan sistem seperti apa yang akan dibangun berdasarkan hasil dari analisis masalah yang didapatkan pada tahap 1 (Communication). Pada tahapan ini, peneliti juga merencanakan urutan atau langkah-langkah pengerjaan sistem yang akan dibangun berdasarkan modul-modul yang diperoleh. Sehingga sistem akan dibangun berdasarkan skala prioritas kebutuhan paling tinggi.

3. Modeling

Pada tahap ini, peneliti merancang desain dari aplikasi yang akan dibangun. Desain ini berupa rancangan sistem dalam bentuk UML (Unified Modeling Language) dan tampilan antar muka dengan membuat visualisasi program dalam bentuk gambar dan tampilan-tampilan antar muka (interface).

6

Desain ini mengacu pada kualifikasi sistem yang dibutuhkan yang didapatkan pada tahap 2 (Planning).

4. Construction

Pada tahap ini, desain yang didapatkan pada tahap 3 (Modeling) dikonversi kedalam bentuk program. Node.JS akan diimplementasikan sebagai pusat dari aplikasi agar dapat berjalan secara real-time. AJAX (Asynchronous Javascript and XML) akan diimplementasikan sebagai media untuk mengirim dan menerima data antar client dan server. HTML5 akan diimplementasikan untuk tampilan antar muka. Pada tahap ini juga dilakukan pengujian terhadap sistem yang dibangun. Pengujian ini bertujuan untuk memastikan bahwa sistem yang sudah dibangun dapat berjalan dengan baik. 5. Deployment

Pada tahap ini, aplikasi yang telah selesai dibangun akan dipresentasikan dan diberikan kepada pihak perusahaan (Tiens Group) untuk mengetahui apakah aplikasi yang dibangun sudah dapat menyelesaikan masalah yang didapatkan pada tahap 1 (Communication) atau belum. Jika belum, pembangunan aplikasi ini akan diulang kembali dari tahap 1 (Communication) hingga tahap 5 (Deployment). Jika sudah sesuai, selanjutnya akan dilakukan pemeliharaan dan pengembangan bila memang diperlukan.

Ilustrasi metode pembuatan perangkat lunak dengan model waterfall digambarkan pada gambar 1.1.

Sumber Gambar : R. S. Pressman dan B. R. Maxim [1] Gambar 1.1 Waterfall Model

1.6 Sistematika Penulisan

Sistematika penulisan penelitian tugas akhir ini disusun untuk memberikan gambaran secara umum tentang penelitian yang dijalankan. Sistematika penulisan penelitian tugas akhir ini adalah sebagai berikut :

BAB I PENDAHULUAN

Pada penelitian ini, BAB I PENDAHULUAN menguraikan tentang latar belakang masalah, identifikasi masalah, maksud dan tujuan dibuatnya aplikasi, metodologi penelitian yang digunakan, batasan masalah serta sistematika penulisan. Pada bab ini, peneliti menguraikan masalah yang ada pada perusahaan Tiens Group Co,. Ltd (Tiens Group), Serta menawarkan solusi yang dapat di terapkan pada perusahaan.

BAB II TINJAUAN PUSTAKA

Pada penelitian ini, BAB II TINJAUAN PUSTAKA mendeskripsikan ruang lingkup objek penelitian (Tiens Group) yang meliputi profil perusahaan, sejarah perusahaan dan visi misi. Kemudian menguraikan berbagai konsep dasar dan teori-teori yang berkaitan dengan “Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan Aplikasi Real-Time Presentation Untuk Seminar

Online”. Pada bab ini, peneliti menguraikan Node.JS, AJAX, dan HTML5 sehingga dapat diimplementasikan dalam pembangunan aplikasi seminar online.

BAB III. ANALISIS DAN PERANCANGAN

Pada penelitian ini, BAB III. ANALISIS DAN PERANCANGAN menguraikan tentang analisis masalah yang dihadapi perusahaan Tiens Group, serta menguraikan solusi pembangunan aplikasi untuk seminar online menggunakan Node.JS, AJAX, dan HTML5. Pada bab ini juga akan diuraikan rancangan sistem kerja aplikasi menggunakan pemodelan secara OOP (Object-Oriented Programming) dengan mendeskripsikan diagram–diagram UML (Unified Modeling Language) seperti Use Case diagram, Activity diagram, Class diagram, dan Sequence diagram.

8

BAB IV. IMPLEMENTASI DAN PENGUJIAN

Pada penelitian ini, BAB IV. IMPLEMENTASI DAN PENGUJIAN menjelaskan tentang implementasi dari perangkat lunak, perangkat keras, implementasi basis data, implemantasi antarmuka, serta pengujian dari sistem, yang meliputi pengujian alpha dan pengujian beta dari sistem yang telah dibangun. Implementasi dan pengujian diperlukan untuk mengetahui apakah sistem yang dibangun sudah sesuai dengan yang dibutuhkan dan dapat berjalan dengan baik ketika digunakan.

BAB V. KESIMPULAN DAN SARAN

Pada penelitian ini, BAB V. KESIMPULAN DAN SARAN berisi tentang kesimpulan yang diperoleh dari hasil penelitian. Kesimpulan ini diperoleh dari pencapaian atau tujuan yang telah ditentukan dan diperoleh dari pengujian-pengujian yang sudah dilakukan. Kemudian saran dari perusahaan (Tiens Group) dan pihak-pihak yang terlibat dalam penilitian ini. Saran ini berupa koreksi, opini atau pendapat dengan harapan saran yang diberikan dapat dijadikan pembelajaran, perbaikan dan pengembangan sistem lebih lanjut.

9

BAB II

TINJAUAN PUSTAKA

2.1 Ruang Lingkup Objek Penelitian

Objek yang menjadi tempat penelitian adalah sebuah perusahaan berskala internasional Tiens Group Co,. Ltd (Tiens Group). Perusahaan ini bergerak pada bidang industri kesehatan, dengan memproduksi dan mendistribusikan produk berupa obat dan alat-alat kesehatan secara internasional. Tiens Group mulai masuk di Indonesia sejak pertengahan tahun 2000 dan sampai hari ini telah mempunyai 13 kantor cabang di seluruh Indonesia. Indonesia dipilih menjadi tempat pusat manajemen wilayah Asia Pasifik sejak tahun 2006.

2.1.1 Sejarah Tiens Group Co,. Ltd

Tiens Group Co. Ltd.(Tiens Group), yang didirikan pada tahun 1995 oleh Mr. Li Jinyuan di Tianjin, China, kini merupakan perusahaan konglomerasi multi-nasional dalam berbagai bidang seperti bio-teknologi, pendidikan, bisnis ritel, pariwisata, institusi keuangan, perdagangan internasional serta bisnis elektronik dan sebagainya. Tiens Group mulai merambah pasar internasional di tahun 1997. Kini, dengan cakupan bisnis yang menjangkau lebih dari 190 negara, Tiens Group telah memiliki kantor cabang di lebih dari 110 negara serta membangun aliansi strategis yang kuat dengan berbagai perusahaan terkemuka di penjuru dunia. Melalui rangkaian produk makanan sehat, produk suplemen kesehatan, produk perawatan kulit, serta produk kebutuhan rumah tangga, Tiens Group berhasil tampil sebagai gaya hidup pilihan dalam bidang kesehatan, kecantikan, serta menciptakan kebahagiaan dan kesejahteraan bagi lebih dari 20 juta keluarga di seluruh dunia.

Berbekal prinsip dasar untuk senantiasa memberikan sumbangsih dan kontribusi amal kepada pmasyarakat, Tiens Group secara aktif menyelenggarakan tanggung jawab sosial perusahaan dan telah mendonasikan lebih dari 1.5 miliar RMB untuk kesejahteraan publik serta beragam aktivitas amal lainnya.

10

Salah satu kunci sukses dalam strategi mengembangkan pasar global Tiens Group adalah dengan membangun tim sumber daya manusia yang terdidik dan mampu berkiprah secara lokal maupun global. Tiens Group memiliki tim bertaraf internasional yang tak terkalahkan dalam bidang riset, inovasi serta profesionalitas, yang meliputi lebih dari 8.000 orang karyawan, di mana 35% diantaranya menyandang gelar master/paska-sarjana atau lebih tinggi.

Tiens Group kini melaju pesat untuk menggapai target menjadi perusahaan yang termasuk dalam Fortune 500. Berbekal sistem manajemen terbaik, serta berbagai prinsip manajemen terkemuka seperti Teori Interaksi Enam Jaringan, Teori Alternatif dan Pertukaran Baru, Teori Supermarket Baru, Konsumsi Menciptakan Kemakmuran, serta Konsums dan Operasional Menciptakan Lebih Banyak Kemakmuran, Tiens melangkah kian mantap di masa mendatang.

2.1.2 Logo Perusahaan

Logo adalah lambang atau simbol khusus yang mewakili suatu perusahaan atau organisasi. Sebuah logo bisa berupa nama, lambang atau elemen grafis lain yang ditampilkan secara visual. Sebuah logo diciptakan sebagai identitas agar unik dan mudah dibedakan dengan perusahaan kompetitor/pesaing. Berikut adalah logo dari perusahaan Tiens Group.

Gambar 2.1 Logo Tiens Syariah

Bentuk tiga daun pada logo TIENS, terinspirasi dari peta dunia yang terbuka tanpa dilipat, merupakan refleksi dari strategi pengembangan “internasionalisasi” TIENS. Selain itu, daun merepresentasikan citra produk yang bersifat “natural dan sehat”. Warna kuning pada logo menyimbolkan “sinar

matahari” dan “kesejahteraan”, sedangkan warna hijau memberikan nafas alami akan semangat menjaga “bumi yang subur”.

Tiga pola huruf “manusia” yang saling berhubungan, menggambarkan tiap individu yang saling bergandengan tangan, secara bersama-sama melintasi pola gambar daun yang alami, secara halus, menginspirasikan konsep bahwa korporasi TIENS berorientasi pada manusia dan lebih jauh, anggota TIENS global tetap saling terkoneksi.Secara keseluruhan, logo ini menyiratkan tren perkembangan merek TIENS.

Desain yang baru ini dikembangkan berdasarkan warna orisinil TIENS sebelumnya dan tetap mempertahankan nilai-nilai inti dari merek TIENS, terutama nama “TIENS”. Seluruh simbol baru ini mewakili inti dari semangat merek “Satu Dunia - Satu Keluarga”. Nilai inti diterjemahkan dalam karakteristik “Inovasi Luar Biasa”, “Tanggung Jawab Utama” serta “Kerja Sama Tim yang Sempurna”. Seluruhnya disertai strategi merek jangka panjang dengan slogan “Bersama Kita Berbagi”. Dengan desain baru ini sebagai titik tolak awal, TIENS memulai perjalanan barunya untuk membangun merek internasional terkemuka.

2.1.3 Visi dan Misi

Visi adalah suatu pandangan jauh tentang perusahaan, tujuan - tujuan perusahaan dan apa yang harus dilakukan untuk mencapai tujuan tersebut pada masa yang akan datang. Visi dari Tiens Group adalah “Menjadi Pemimpin Dunia dalam Industri Penjualan Langsung Untuk Pasar Massal”.

Misi adalah pernyataan tentang apa yang harus dikerjakan oleh lembaga dalam usahanya mewujudkan Visi. Misi perusahaan adalah tujuan dan alasan mengapa perusahaan itu ada. Misi juga akan memberikan arah sekaligus batasan proses pencapaian tujuan. Misi dari Tiens Group adalah “Menyediakan produk berkualitas serta peluang pendidikan dan sosial bagi para konsumen global untuk meningkatkan taraf hidup mereka serta menciptakan masyarakat yang harmonis dalam kehidupan”.

Berikut adalah poin-poin nilai merek dan filosofi dari Tiens Group. 1. Inti Merek TIENS: Satu Dunia, Satu Keluarga

12

2. Nilai Inti Merek TIENS:Inovasi Luar Biasa, Penuh Tanggung Jawab, Kerja Sama Tim yang Sempurna

3. Slogan Merek TIENS: Bersama Kita Berbagi

4. Filosofi Bisnis: Berkontribusi kepada masyarakat melalui peningkatan kesehatan umat manusia.

5. Semangat Perusahaan:Berkontribusi melalui industrialisasi, serta menggapai tujuan yang lebih tinggi melalui kerja sama tim yang harmonis dan dedikasi yang tulus.

6. Panduan Kualitas: Prinsip dasar untuk membangun kesehatan manusia, Perkembangan untuk mewujudkan inovasi teknis, Metode bagi perbaikan yang berkesinambungan, serta Hati untuk melayani dan memuaskan konsumen.

2.2 Landasan Teori

Pada landasan teori ini, peneliti menguraikan berbagai konsep dasar dan teori-teori yang berkaitan dengan “Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan Aplikasi Real-Time Presentation Untuk Seminar Online”. Pada poin ini, konsep dasar dan teori-teori yang diberikan mengacu pada pemikiran dan tulisan dari tokoh-tokoh pada bidang yang bersangkutan dan juga beberapa buku yang menuliskan tentang teori-teori tersebut.

2.2.1 Webinar (Web-based Seminar)

Webinar itu adalah suatu seminar, presentasi, pengajaran ataupun workshop yang dilakukan secara online, dapat diibaratkan pertemuan (meeting) tatap muka secara online yang disampaikan melalui media Internet yang dapat dihadiri oleh banyak orang yang berada di lokasi berbeda-beda [2].

Webinar atau seminar melalui web merupakan suatu pertemuan yang dilakukan secara online aplikasi ini memiliki sebuah slide presentasi dan interaksi antara pembicara dengan peserta yang terbatas. Webinar memungkinkan adanya hubungan interaktif yang langsung antara moderator / presenter dan peserta.

2.2.1.1Sejarah Webinar

Webinar merupakan sebuah pengembangan dari webcast yang merupakan metode presentasi satu arah. Biasanya presenter hanya menyampaikan informasi kepada audience. Dalam hal ini, diskusi tidak dapat terjadi. Pada tahun 1980 hingga 1990-an, kita mengenal Real Time Text Chat. Pada saat itu pengguna internet sebagian besar menggunakan IRC untuk berkomunikasi dengan orang lain di tempat berbeda. Di akhir tahun 1990, banyak pengguna internet beralih kepada komunikasi yang berbasis pada teknologi Web Based Chat seperti Yahoo Messanger. Teknologi ini bertahan cukup lama dan banyak digunakan dalam dunia kerja. Kini, teknologi baru telah bergulir kembali, media video digadang- gadang sebagi media komunikasi yang sangat efektif. Oleh karenanya webinar muncul sebagai sebuah aplikasi yang memungkinkan menggunakan video dan data sekaligus. Google Analytic Webinar merupakan fasilitas yang diberikan google sebagai pengembangan teknologi ini [2].

2.2.1.2Cara Kerja Webinar

Jika ingin menghadiri acara seminar konvensional, maka diperlukan untuk datang ke suatu lokasi atau tempat yang ditentukan. Berbeda dengan webinar, untuk mengikuti webinar hanya perlu bersiap (standby) pada waktu yang telah ditetapkan, dan peserta seminar dapat mengikuti seminar tersebut di mana pun selama terkoneksi dengan Internet.

Pada pelaksanaan webinar, moderator menyampaikan materi seminar menggunakan perangkat komputer PC atau laptop. Penyampaian materi ini dapat berupa text, slideshow, ataupun melalui video streaming. Kemudian peserta (audience) mengakses halaman website webinar untuk dapat mengikuti seminar yang diadakan melalui komputer PC atau laptop. Dengan aplikasi webinar, pelaksanaan seminar dapat dilakukan dimana saja tanpa terbatas tempat dan jumlah peserta yang mengikutinya.

14

Sumber Gambar : R. Setiawan [2] Gambar 2.2 Cara Kerja Webinar

Adapun hal-hal yangperlu dipersiapkan sebelum melaksanakan webinar adalah sebagai berikut.

1. Komputer atau laptop, dapat juga menggunakan smartphone, namun disarankan untuk menggunakan komputer atau laptop karena memiliki fitur lebih lengkap dibandingkan dengan smartphone.

2. Browser yang sudah terinstal di komputer.

3. Koneksi internet yang stabil dan cepat. Sangat disarankan untuk menggunakan koneksi internet broadband yang lebih stabil dan kecepatan tinggi. Webinar berjalan seperti online streaming yang membutuhkan kecepatan akses yang tinggi.

4. Speaker aktif atau headset untuk mendengarkan presentasi dan komunikasi.

5. Email aktif anda, untuk melakukan pendaftaran webinar, anda membutuhkan email aktif.

2.2.1.3Kelebihan Webinar

Sebagai sarana komunikasi kelompok, webinar memiliki beberapa kelebihan jika dibandingkan seminar atau pertemuan secara konvensional. Berikut adalah kelebihan dari webinar

1. Minim tempat karena bisa dilakukan secara individu dari berbagai tempat berbeda.

2. Biaya yang relative lebih murah jika dibandingkan seminar langsung. 3. Mengurangi tekanan presentasi karena kita tidak bertatap langsung dengan

anggota lain.

2.2.2 Javascript

Menurut Aloysius Sigit W. [3]. “Javascript merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif”. Javascript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi Javascript berjalan di sisi Client. Desain Javascript dipengaruhi oleh banyak bahasa pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer.

Menurut Eka Y Saputra [4]. “Javascript adalah sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web”. Javascript dieksekusi pada client side (komputer pengguna). Sebuah server website mengirim Javascript ke peramban milik pengguna, dan browser tersebut menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah sandbox, yang menjaga agar Javascript tidak menyentuh internal sistem, sehingga mencegah malicious code (kode jahat) menginfeksi komputer pengguna.

Javascript bukan merupakan scripting language, juga sama sekali tidak berhubungan dengan platform software Java milik Oracle. Javascript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat Javascript pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan pengolahan.

2.2.2.1Sejarah Javascript

Javascript pertama kali dikembangkan oleh Brendan Eich dari Netscape pada tahun 1955 dibawah nama Mocha, yang nantinya namanya diganti menjadi

16

LiveScript, dan akhirnya menjadi Javascript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama Javascript, walaupun tidak ada hubungan bahasa antara Java dengan Javascript [3].

2.2.2.2Javascript Event

Pada dasarnya event merupakan suatu respon / aksi yang dilakukan oleh user dimana kegiatan tersebut akan memicu jalannya script Javascript yang ada di dalam file website tersebut. Kegiatan yang dimaksud disini seperti mengarahkan pointer ke sebuah link atau sebuah objek dimana akan memunculkan sebuah alamat url. Dengan kata lain, Event dapat diartikan suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode Javascript yang sudah dibuat. Sebagian besar event dipicu oleh pemakai yang memanipulasi halaman web pada program browsernya , misalnya jika suatu tombol di klik maka akan menjalankan suatu function. Berikut beberapa penjelasan dan contoh event pada Javascript.

Tabel 2.1 Daftar Event Javascript

Event Handler Objek Fungsi

onAbort Gambar. Menjalankan kode Javascript jika terjadi pembatalan proses.

onBlur Button, CheckBox, Frame, Password, RadioButton, Reste, Submit,Select List, TextArea, TextField, Window.

Menjalankan kode Javascript ketika posisi kursor berpindah dari suatu objek (Lost Focus)

onFocus

Frame, Button, Submit, Reset, Select List, TextArea, TextField, Window.

Menjalankan kode Javascript jika posisi kursor berada pada suatu objek.

onChange Select List, TextArea, TextField

Menjalankan kode Javascript ketika nilai suatu objek berubah.

onSelect TextField, TextArea

menjalankan kode Javascript ketika teks didalam area objek diseleksi.

onClick

Button, CheckBox, RadioButton, Submit, Reset, Link.

Menjalankan kode Javascript ketika suatu objek diklik. onError Gambar, Window.

Menjalankan kode Javascript ketika terjadi error pada prosedur tertentu.

onLoad Gambar, Window.

Menjalankan kode Javascript ketika gambar atau halaman akan ditampilkan.

onMouseOut Link.

Menjalankan kode Javascript ketika kursor meninggalkan area objek.

onMouseOver Link.

Menjalankan kode Javascript ketika kursor berada diatas suatu objek.

onReset Form. Menjalankan kode Javascript ketika fungsi reset dijalankan. onSubmit Form. Menjalankan kode Javascript

ketika proses submit dijalankan. onUnload Window. Menjalankan kode Javascript

ketika halaman web akan ditutup.

2.2.2.3Contoh Javascript

Kode Javascript biasanya dituliskan dalam bentuk fungsi yang ditaruh di dalam tag <head> ataupun tag <body> pada html. kode Javascript dibuka dengan tag<script> dan ditutup dengan tag </script>.

<script type=‛teks/Javascript‛> Function CallAllert(){

alert(‚Hello Word!‛); }

18

Kode Javascript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari Javascript). Untuk memanggil kode Javascript yang terdapat di file sendiri, harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type=‛teks/Javascript‛ src=‛NamaFile.js‛></script>

Berikut adalah contoh penggunaan Javascript menggunakan event onClick. Pada contoh ini, browser akan menampilkan pop-up dengan tulisan “Hello Word!” ketika usermenekan tombol “Javascript”.

<html>

<head>

<script type=‛teks/Javascript‛> Function CallAllert(){

alert(‚Hello Word!‛); }

</script>

</head>

<body>

<button onClick=‛CallAllert()‛>Javascript</button> </body>

</html>

2.2.3 HTML5

Menurut Sibero [5], “HTML (Hyper Text Markup Language) Merupakan sebuah bahasa markah yang digunakan pada dokumen web sebagai bahasa untuk

digunakan dalam publikasi dokumen, disebut SGML (Standard Generalized Markup Language).

HTML5 tidak secara murni dari XHTML, melainkan pengembangan dari HTML4.01. HTML5 memberikan pembaruan HTML, CSS, dan Javascript yang digunakan untuk kasus yang lebih kompleks. Salah satu fitur yang paling populer pada HTML5 adalah mampu mendukung fitur multimedia seperti dapat memutar audio dan video dan mendukung animasi tanpa harus menambahkan plug-in tambahan pada browser. HTML5 menggunakan tags yang diwariskan dari HTML4.01 dengan beberapa tambahan tags baru [6].

HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. HTML menggunakan tags untuk memformat fitur seperti <b>Ini Adalah Huruf Tebal</b>, dimana huruf yang terdapat diantara tag b dibuat menjadi huruf tebal. Terlihat perbedaah antara tag pertama dan tag kedua, tag kedua memiliki slash (/) untuk menandakan bahwa itu adalah penutup tag. Hampir semua HTML tag memiliki tag penutup. HTML tag seperti <br> dan <img> tidak memerlukan tag penutup karena tag <br> hanya memanggil baris baru dan <img> hanya memanggil gambar.

2.2.3.1Sejarah HTML5

The World Wide Web Consortium, dikenal juga sebagai W3C (http://www.w3c.org), merespon untuk membuat standar suatu web. W3C mengenalkan XHTML untuk menyelesaikan masalah pada HTML versi 4. XHTML adalah sebuah XML-based specification yang membuat HTML dapat menerjemahkan aturan XML dalam mendeskripsikan format dokumen yang lebih baik. Namun masih terdapat masalah yang tidak dapat dipecahkan dengan menggunakan XHTML ini, yaitu kebutuhan dalam penggunaan perangkat multimedia. Kemudian dikembangkan HTML5 yang merupakan pembaharuan dari HTML versi 4. Pada HTML5 ini, penggunaan perangkat multimedia menjadi lebih mudah dan interaktif. Diantaranya adalah website mampu menampilkan audio dan video tanpa harus menggunakan plugin tambahan [5].

20

2.2.3.2Contoh HTML5

Pada dokumen HTML umumnya terdapat tag utama yaitu <head> dan <body>. Didalam tag utama ini dapat dimasukan tag-tag lainya. Berikut adalah contoh penulisan pada HTML5.

<!DOCTYPE html>

<html>

<head>

<title>Ini dalah Judul Website</title>

</head>

<body>

<h1>Judul Halaman</h1>

<p>Ini adalah paragraf pada HTML...</p>

</body>

</html>

2.2.4 AJAX (Asynchronus Javascript and XML)

AJAX merupakan singkatan dari “Asynchronous Javascript and XML“, merupakan metode suatu laman web menggunakan Javascript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet [4].

AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul “AJAX: A New Approach To Web Applications”. Jesse James memberi istilah AJAX untuk singkatan dari Asynchronous Javascript And XML, namun pada perkembangannya data yang dikomunikasikan secara Asynchronous tidaklah harus berupa XML data, kita mengunakan format data lain untuk dikomunikasikan secara Asynchronous dengan server seperti Plain Text File, HTML Data atau juga berupa SWF data (Flash file) [7].

AJAX bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru penggunaan standar yang telah ada. Dengan AJAX kita dapat menjadi lebih baik, cepat dan menambah unsur user-friendly dan interaktif pada aplikasi web kita. AJAX berbasiskan pada Javascript dan request HTTP. AJAX berbasiskan standar terbuka seperti Javascript, XML, HTML/XHTML, CSS.

2.2.4.1Sejarah AJAX

Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan pada IE5 (circa 1998) dan kemudian dipergunakan secara luas pada Outlook Web Access. Jesse James Garrett's kemudian memberikan istilah AJAX untuk tehnik Asynchronous ini pada salah satu tulisannya di tahun 2005. Dan hingga saat ini telah banyak yang mengimplementasikan tehnik ini dalam pengembangan web, sebagai contoh pengunaan AJAX dalam aplikasi web diantaranya adalah Google Map, Flickr.com, gmail.com, google sugest, yahoo.com [7].

2.2.4.2Perbedaan Asynchronous & Synchronous

Pada singkatan AJAX ditemukan istilah “Asynchronous”, sehingga ada juga istilah “Synchronous” dalam pengembangan website. Berikut adalah perbedaan website dengan menggunakan AJAX (Asynchronous) dan tanpa menggunakan AJAX (Synchronous).

1. Synchronous

Dalam proses synchronous ini user melakukan permintaan proses (request process) ke server dan menunggu hingga server mengembalikan hasil proses yang di minta, umumnya hasil proses dari server merupakan sebuah halaman web baru yang ditampilkan pada web browser user.

22

Sumber Gambar : G. Jesse James [7] Gambar 2.3 Synchronous Request Proccess

Saat user berinteraksi dengan sebuah halaman web terdapat banyak pilihan link yang dapat ditemukan, dan saat link tersebut di klik maka halaman web tersebut akan melakukan komunikasi dengan server melalui internet untuk meminta proses ke server (send Request). Selama server melakukan proses, user akan menunggu hasil proses tersebut. Setelah server selesai melakukan proses yang diminta maka server akan mengembalikan hasil proses yang akan ditampilkan pada client web browser.

2. Asynchronous

Pemanfaatan tehnik Asynchronous dengan Javascript ini dalam pengembangan web ini lebih dikenal dengan istilah WEB 2.0 (baca: web two point O). Dengan tehnik proses Asynchronous membuat sebuah aplikasi web lebih kaya atau banyak yang menulis dengan istilah Rich Internet Aplication (RIA), browser dapat membiarkan user untuk tetap berinteraksi dengan halaman web yang ada selama proses request dilakukan dan selama server belum mengembalikan hasil proses yang diminta. Dan saat hasil proses telah selesai browser hanya perlu mengupdate data halaman web yang telah ada.

Sumber Gambar : G. Jesse James [7] Gambar 2.4 Asynchronous Request Proccess

User berinteraksi dengan link‐link yang ada untuk meminta proses ke server, proses yang diminta akan dikirimkan secara background ke server, selama server belum mengembalikan data hasil proses, user dapat tetap bekerja dengan halaman web yang ada sebelumnya. Setelah server selesai melakukan proses, hasil proses tersebut akan dikirmkan kembali kepada web browser, saat data yang dikirimkan server telah diterima oleh web browser user maka data tersebut ditampilkan pada halaman web yang telah ada sebelumnya.

2.2.4.3Contoh AJAX

Untuk dapat mengembangkan aplikasi web dengan tehnik AJAX ini kita perlu mengkombinasikan beberapa hal berikut:

1. Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk berkomunikasi dengan server secara behind the scene.

2. DOM (Document Object Model), hasil proses yang diterima akan kita tampilkan dengan memanipulasi object DOM yang telah kita persiapkan sebelumnya untuk menampilkan data hasil proses yang diberikan server. 3. XML (eXtensible Markup Language) format data yang dikembalikan oleh

server, data XML ini siap dibaca dan ditampilkan untuk mengupdate content pada halaman web.

24

Berikut adalah contoh penulisan AJAX menggunakan XMLHttpRequest.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" /> <title>AJAX ‐ Demo 1</title>

<script language="Javascript">

function createRequest(){

var oAJAX = false;

try {

oAJAX = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

oAJAX = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

oAJAX = false;

}

}

if (!oAJAX && typeof XMLHttpRequest != 'undefined') {

oAJAX = new XMLHttpRequest();

}

if (!oAJAX){

alert("Error saat membuat XMLHttpRequest!");

}else{

alert("XMLHttpRequest sukses dibuat!");

return oAJAX;

}

</script>

</head>

<body onload="Javascript:createRequest();">

Halaman ini memangil function pembuatan class object XMLHttpRequest

<br />Jika gagal atau pun berhasil akan di tampilkan Alert message.

</body>

</html>

2.2.5 Node.JS

Menurut Eka Y Saputra [4]. “Node.js memampukan Javascript dijalankan tanpa peramban, dan umumnya dipergunakan untuk menjalankan server web”. Javascript berjalan pada browser dengan satu pengecualian. pengecualian tersebut ialah Node.js. Ia adalah sebuah tool command-line untuk menjalankan Javascript pada sebuah mesin tanpa harus menjalankannya pada peramban. Hal ini dimampukan dengan adanya suatu versi Chrome’s V8 Engine, yakni engine Javascript yang berjalan dalam Google Chrome.

Node.js adalah sistem perangkat lunak yang didesain untuk pengembangan aplikasi web. Aplikasi ini ditulis dalam bahasa Javascript, menggunakan basis event dan asynchrounous I/O. Tidak seperti kebanyakan bahasa Javascript yang dijalankanpada peramban, Node.js dieksekusi sebagai aplikasi server. Aplikasi ini terdiri dari V8 Javascript Engine buatan Google dan beberapa modul bawaan yang terintegrasi [8].

2.2.5.1Sejarah Node.JS

Node.js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian berkembang pesat dibawah lisensi Open Source MIT oleh sebuah

26

perusahaan bernama Joyent Inc. Pada hakekatnya Node.js dikembangkan berdasarkan teknologi Google V8 Javascript engine serta berisi kompilasi script inti dan banyak modul siap pakai yang bermanfaat sehingga pengguna (dalam hal ini pengembang web) tidak perlu melakukan coding dan mendesain segalanya dari awal [8].

2.2.5.2Node Modules

Node Modules merupakan kumpulan library yang tersedia pada Node.JS. Berikut adalah beberapa Node Modules yang biasa digunakan dalam membangun sebuah aplikasi menggunakan Node.JS.

1. Socket.IO

Socket.IO merupakan Javascript library untuk membuat website yang real-time, dan memungkinkan komunikasi dua arah yang real-time antara web client dan server. Memiliki 2 bagian library untuk client-side yang berjalan di browser dan server-side library untuk Node.js [9].

2. Express

Express.js adalah web application framework Node.js yang paling sering digunakan dan paling populer diantara yang lain. Express.js memiliki keunggulan yaitu performa yang cepat karena source code yang minimalis dan didesain sedemikian rupa demi mendapatkan performa website yang baik [9].

2.2.5.3Class Pada Node.JS

Javascript tidak memiliki gagasan yang nyata dari class, setidaknya tidak dalam arti tradisional. Apa yang ditulis sangat umum digunakan untuk tujuan yang sama bahwa keduanya hampir mirip. Faktanya sebagian besar developers akan memanggil definisi class meskipun 'User' hanyalah sebuah tipe objek baru.

function User(n) {

this.name = n;

var bob = new User('Bob');

Sementara pola ini memungkinkan banyak class di Javascript, 'User' hanya sebuah fungsi, dan 'Bob' adalah sebuah objek. Tetapi karena objek pada Javascript begitu kuat, anda dapat menggunakanya untuk membuat custom type baru dengan menggunakan methods / properties yang membuatnya merasa dan berprilaku seperti layaknya traditional class.

User.prototype.sayHi = function() {

console.log('Hi, My name is ' + this.name);

};

bob.sayHi(); // "Hi, My name is Bob"

Jadi pada umumnya itu aman untuk berpikir bahwa pola seperti ini adalah sebuah class, ingat bahwa mereka masih sebuah objek. Constructor hanya mendefinisikan tipe sementara prototype menggambarkan perilaku.

Ketika membaca module baru, hal pertama yang harus dilakukan adalah mencari tahu apa yang di export. Dalam file besar ini tidak selalu jelas, untuk melakukan hal ini, ikat module.exports untuk dikonstruksikan pada bagian paling atas public section anda.

// Private

var privateVariable = true;

// Public

module.exports = User;

function User(n) {

this.name = n;

}

28

Ini memberikan anda kemudahan dalam membedakan mana private dan public, satu titik untuk menemukan apa yang sedang di export. Sekarang anda dapat meminta constructor dimanapun pada aplikasi anda dan dengan mudah membuat user baru.

var User = require('User');

var bob = new User('Bob');

2.2.5.4Databases Support

Node.JS dapat mendukung penggunaan beberapa jenis basis data. Dengan menambahkan driver yang sesuai, Node.JS dapat mendukung penggunaan basis data sebagai berikut.

1. Cassandra

Apache Cassandra adalah open source didistribusikan sistem manajemen database. Proyek ini dirancang untuk menangani jumlah yang data yang sangat besar yang tersebar di banyak server komoditas sekaligus memberikan layanan sangat tersedia tanpa titik tunggal kegagalan [10].

2. CouchDB

CouchDB merupakan salah satu database NoSQL berbasis dokumen yang masuk dalam pembinaan Apache Foundation. Bersama dengan Cassandra, Hadoop, Tomcat, Lucene, CouchDB tinggal serumah dalam dunia open source. CouchDB juga menjadi salah satu pionir database NoSQL sebelum digandrungi oleh developer di masa kini. CouchDB dibangun menggunakan bahasa pemrograman Erlang yang mengandalkan pada reliabilitas dan konkurensi [11].

3. MySQL

MySQL adalah sistem manajemen database SQL yang bersifat Open Source dan paling populer saat ini. Sistem Database MySQL mendukung beberapa fitur seperti multithreaded,

multi-user, dan SQL database managemen sistem (DBMS). Database ini dibuat untuk keperluan sistem database yang cepat, handal dan mudah digunakan [12].

4. MsSQL

Microsoft SQL Server merupakan produk RDBMS (Relational Database Management System) yang dibuat oleh Microsoft. Orang sering menyebutnya dengan SQL Server saja. Microsoft SQL Server juga mendukung SQL sebagai bahasa untuk memproses query ke dalam database. Microsoft SQL Server Mirosoft SQL Server banyak digunakan pada dunia bisnis, pendidikan atau juga pemerintahan sebagai solusi database atau penyimpanan data [13].

5. MongoDB

MongoDB (dari kata “humongous”) adalah sebuah document oriented database yang bersifat open source. MonggoDB merupakan salah satu database noSQL. MongoDB tidak mengenal adanya tabel, kolom dan baris jadi tidak ada schema dalam MongoDB (schema-less). Unit paling kecil dari MongoDB adalah documment, sedangkan kumpulan dari document adalah collection [14].

6. Neo4j

Neo4j merupakan basis data NoSQL dengan sistem graf. Apabila berurusan dengan basis data berbasis graf, maka Neo4j lah yang paling dikenal. Neo4j menyimpan relasi antar objek dalam struktur seperti graf, dimana setiap objek merujuk ke objek lainnya secara langsung. Dalam menambahkan maupun mengambil data, Neo4j memiliki bahasa sendiri yang disebut Cypher [15].

7. Redis

redis merupakan basis data berbasis key-value paling populer menurut situs DB-Engines.com. Redis merupakan

30

singkatan dari REmote DIctionary Server. Basis data ini dikembangkan oleh Salvatore Sanfilippo pada tahun 2009 dan ditulis dalam bahasa C. Redis banyak dipilih karena memiliki fitur in-memory, networked, dan durabilitas tinggi [15].

8. PostgreSQL

PostgresSQL adalah sebuah Object-Relational Database Management System (ORDBMS) yang dapat digunakan pada banyak sistem operasi seperti Linux, FreeBSD, Solaris, Microsoft Windows dan Mac OS X. PostgreSQL dikembangkan oleh PostgreSQL Global Development Group yang bersifat gratis serta merupakan perangkat lunak open source [16].

9. SQLite

SQLite merupakan sebuah library proses yang menerapkan serverless (mandiri tanpa server), zero configuration, database SQL transaksional. SQLIte saat ini banyak digunakan dalam aplikasi yang banyak kita jumpai, termasuk dalam beberapa high- profule project. SQLIte juga merupakan mesin database SQL embedded yang berbeda dengan kebanyakan database SQL lainnya. SQLIte tidak memiliki proses server yang terpisah. SQLITE membaca dan menulis secara langsung ke disk [17].

2.2.6 MySQL

MySQL adalah sebuah implementasi dari sistem manajemen basis data relasional (RDBMS) yang didistribusikan secara gratis di bawah lisensi GPL (General Public License). Setiap pengguna dapat secara bebeas menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam basis data yang telah ada sebelumnya. MySQL memiliki beberapa kelebihan, diantaranya [18].

1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga.

2. Perangkat Lunak Open Source. MySQL didistribusikan sebagai perangkat lunak open source, di bawah lisensi GPL sehingga dapat digunakan secara gratis.

3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik.

4. Performance Tuning. MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu.

5. Ragam Tipe Data. MySQL memiliki ragam tipe data yang sangat kaya, seperti signed/unsigned integer, float, double, char, text, date, timestamp, dan lain-lain.

6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah select dan where dalam perintah (query).

7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level subnet mask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta sandi terenkripsi.

8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indexs yang dapat ditampung mencapai 32 indexs pada tiap tabelnya.

9. Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCP/IP, UNIX soket (UNIX), atau Named Pipes (NT).

10. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meskipun demikian, bahasa Indonesia belum termasuk didalamnya.

11. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface).

32

12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool) yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online.

13. Struktur Tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE, dibandingkan basis data lainya seperti PostgreSQL ataupun Oracle.

2.2.6.1Contoh Query MySQL 1. Tambah Data

INSERT INTO tabel_mahasiswa (field_nim, field_nama, field_alamat) VALUES (‘10111655’, ‘Angga Nugraha’, ‘Bandung’ );

2. Lihat Data

SELECT field_nim, field_nama, field_alamat FROM tabel_mahasiswa;

3. Edit Data

UPDATE tabel_mahasiswa SET field_alamat=’Cibiru’ WHERE field_nim=’10111655’;

4. Hapus Data

DELETE tabel_mahasiswa WHERE field_nim=’10111655’;

2.2.7 UML (Unified Modeling Language)

Unified Modeling Language (UML) adalah sebuah notasi grafis untuk menggambar diagram sebuah konsep software. satu dapat mengguakan ini untuk menggambar diagram pada permasalahan utama, sebuah desain perangkat lunak yang diusulkan, atau implementasi perangkat lunak yang telah selesai. Fowler menjelaskan ketiga perbedaan tingkatan seperti Conceptual, Specification dan Implementatition [19]. Berikut adalah beberapa diagram UML yang sering digunakan.

1. Use Case

Use Case adalah deskripsi dari perilaku sistem. deskripsi yang ditulis dari sudut pandang pengguna yang baru saja mengatakan kepada sistem untuk melakukan sesuatu tertentu. Use Case menangkap peristiwa yang berjalan pada sistem melalui satu stimulus dari pengguna. Use Case tidak membahas mengenai mekanisasi sistem, melainkan membahas mengenai apa yang dapat user lihat.

Sumber Gambar : S. Dharwiyanti [20] Gambar 2.5 Contoh Use Case Diagram

2. Activity Diagram

Activity diagrams menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Activity diagram merupakan state diagram khusus, di mana sebagian besar state adalah action dan sebagian besar transisi

di-34

trigger oleh selesainya state sebelumnya (internal processing). Oleh karena itu activity diagram tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsistem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum.

Sumber Gambar : S. Dharwiyanti [20] Gambar 2.6 Contoh Activity Diagram

3. Class Diagram

Class Diagram UML memungkinkan kita untuk menunjukkan isi statis, dan hubungan antara kelas. Dalam Class Diagram kita dapat menunjukkan variabel anggota, dan fungsi anggota dari class. Kita juga dapat menunjukkan apakah satu kelas mewarisi dari yang lain, atau apakah itu memegang referensi ke yang lain. Singkatnya, kita dapat menggambarkan semua dependensi kode sumber antara kelas.

Sumber Gambar : S. Dharwiyanti [20] Gambar 2.7 Contoh Class Diagram

Multiplicity adalah jumlah banyaknya objek sebuah kelas yang berelasi dengan sebuah objek lain dari kelas lain yang berasosiasi dengan kelas tersebut. Macam-macam multiplicity disajikan dalam tabel berikut :

Tabel 2.2 Macam Multiplicity

4. Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait).

Multiplicity Keterangan

[digit] Tepat sesuai angka 0..* Kosong Ke Banyak 0..1 Kosong ke Satu 1..* Satu ke Banyak 3..5 Tiga sampai Lima

36

Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. Diawali dari apa yang men-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan.

Sumber Gambar : S. Dharwiyanti [20] Gambar 2.8 Contoh Sequence Diagram

2.2.8 Flowmap

Menurut Jogiyanto [21] dalam bukunya yang berjudul Analisis dan Desain Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis,

menjelaskan bahwa: “Bagan alir (flowmap) adalah bagan (map) yang menunjukan

alir (flow) didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi”.

Flowmap menolong analis dan programmer untuk memecahkan masalah kedalam segmen-segmen yang lebih kecil dan menolong dalam menganalisis alternatif-alternatif lain dalam pengoperasian.

2.2.8.1Jenis-Jenis Flowmap

Flowmap terbagi menjadi 5 bagian. Berikut adalah pembagiannya. 1. Bagan alir sistem (sistems flowmap)

Bagan alir sistem (system flowmap) merupakan bagan yang menunjukkan arus pekerjaan secara keseluruan dari sistem. Bagan menjelaskan urutan-urutan dari prosedure-prosedure yang ada dalam sistem. Bagan alir sistem menunjukan apa yang dikerjakan sistem.

2. Bagan alir dokumen (document flowmap)

Bagan alir dokumen (document flowmap) atau disebut bagan alir formulir (form flowmap) atau paperwork flowmap merupakan bagan alir yang menunjukan arus dari laporan dan formulir termasuk tembusan-tembusannya. Bagan alir dokumen ini menggunakan simbol-simbol yang sama dengan yang digunakan di dalam bagan alir sistem.

3. Bagan alir skematik (schematic flowmap)

Bagan alir skematik (schematic flowmap) merupakan bagan alir yang mirip dengan bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem. Perbedaannya adalah bagan alir skematik menggunakan simbol-simbol bagan alir sistem , juga menggunakan gambar - gambar komputer dan peralatan lainnya yang digunakan. Maksud penggunaan gambar-gambar ini adalah untuk memudahkan komunikasi kepada orang yang kurang paham dengan simbol-simbol bagan alir.

4. Bagan alir program (program flowmap)

Bagan alir program (program flowmap) merupakan bagan yang menjelaskan secara rinci langkah-langkah dari proses program.

5. Bagan alir proses (process flowmap)

Bagan alir proses (process flowmap) merupakan bagan alir yang banyak digunakan teknik industri. Bagan alir juga berguna bagi anilis sistem untuk menggambarkan proses dalam suatu prosedure.

38

2.2.8.2Pedoman Pembuatan Flowmap

Bila seorang analis dan programmer akan membuat flowmap , ada beberapa petunjuk yang harus diperhatikan, seperti :

1. Flowmap digambarkan dari halaman atas ke bawah dan kiri ke kanan. 2. Aktivitas yang digambarkan harus didefinisikan secara hati-hati dan

definisi ini harus dapat di mengerti oleh pembacanya.

3. Kapan aktivitas dimulai dan berakhir harus di tentukan secara jelas. 4. Setiap langkah dari aktivitas harus berada pada urutan yang benar.

5. Lingkup dan range dari aktifitas yang sedang di gambarkan harus di telusuri dengan hati-hati.

6. Gunakan simbol-simbol flowmap yang standar.

2.2.9 Sublime Text

Sublime Text adalah aplikasi text editor yang digunakan untuk membuka file apapun namun sejatinya para programmer menggunakannya untuk menulis code. Sublime text mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML, ASP dan banyak lagi [22].

Untuk saat ini versi paling terbaru adalah sublime Text 3. Sublime Text memiliki beberapa kelebihan, diantaranya adalah sebagai berikut.

1. Goto anything

Ini digunakan untuk membuka file diawali dengan menarik satu project file yang sedang kita kerjakan pada sublime kemudian dengan menekan CTRL+P maka kita dapat mencari file apa yang akan kita buka dengan menuliskan nama filenya, juga kita dapat mencari baris kata dengan keyword # atau @ untuk melompat ke simbol setelah menekan CTRL+P.

2. Multiple Selection

Berfungsi untuk membuat perubahan pada code pada saat yang sama dalam beberapa baris yang berbeda. Bisa dicoba dengan menekan CTRL+L, atau bisa mengganti kata yang sama dalam baris berbeda dengan mem-blok kata yang akan diganti kemudian tekan CTRL+D.

Untuk fungsi yang satu ini jarang digunakan sebenarnya namun dalam fungsi ini banyak sekali hal yang bisa dilakukan seperti menutup semua file, convert case, lower case, remove tag dan masih banyak lagi. dengan menekan CTRL+SHIFT+P.

4. Distraction Free Mode

Digunakan untuk merubah tampilan menjadi layar penuh, dibutuhkan ketika user akan fokus pada kerjaan yang dikerjakan maka dengan fungsi ini akan sangat membantu dengan menekan SHIFT+F11.

5. Split Editing

Memperbolehkan mengedit file berdampingan, atau mengedit dua lokasi pada satu file dengan beberapa baris dan kolom yang anda inginkan. dengan cara : masuk ke menu FILE > New menu into File.

6. Instant Project Switch

Sublime text akan mengcapture semua kerjaan pada file project yang sedang dibuka termasuk file yang dirubah dan belum di save, anda dapat beralih ke file lain dengan cara yang mirip fungsi Goto anything, dan hasil modifikasi anda akan di kembalikan pada waktu proyek dibuka kembali.

7. Plugin API Switch

Teks Sublime memiliki kekuatan, berbasis Python Plugin API. Seiring dengan API, ia datang dengan built in Python konsol secara interaktif bereksperimen secara real time.

8. Customize Anything

Bindings Key, Menu, Snippets, Macro, Penuntasan dan banyak lagi. Segala sesuatu di Teks Sublime disesuaikan dengan file JSON sederhana. Sistem ini memberi Anda fleksibilitas pengaturan dapat ditentukan pada jenis per-file dan per-proyek dasar.

9. Cross Platform

Yang paling tak kalah keren sublime tersedia untuk berbagai platform, Windows, Linux, OS X satu lisensi untuk semua yang anda butuhkan apapun sistem oprasi yang digunakan. Teks Sublime menggunakan toolkit UI custom, dioptimalkan untuk kecepatan dan keindahan.

115

BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Setelah melakukan analisis, perancangan, implementasi beserta pengujian, maka kesimpulan yang dapat diambil pada penelitian ”Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan Aplikasi Real-Time Presentation Untuk

Seminar Online” adalah sebagai berikut :

1. Dengan menerapkan aplikasi seminar online ini, perusahaan dapat menekan biaya pelaksanaan seminar dalam hal keperluan sewa gedung atau aula untuk melaksanakan seminar.

2. Dengan menerapkan aplikasi seminar online ini, perusahaan dapat menjangkau peserta seminar dimanapun mereka berada selama terkoneksi dengan internet. Dikarenakan aplikasi ini dapat berjalan secara online, sehingga peserta yang berada di tempat yang berbeda-beda dapat mengikuti seminar secara serempak dalam waktu yang sama.

3. Perusahaan tidak perlu lagi menentukan jumlah kursi yang harus disediakan ketika akan melaksanakan acara seminar, dan perusahaan dapat mengetahui berapa jumlah peserta yang akan mengikuti seminar sehingga perusahaan dapat merubah atau membatalkan acara seminar apabila peserta yang menghadiri seminar sedikit atau tidak sesuai dengan yang telah direncanakan.

5.2 Saran

Agar aplikasi seminar online ini kedepanya dapat berjalan dengan lebih baik, maka yang dapat disarankan adalah :

1. Penambahan proses komunikasi yang dapat berjalan secara dua arah, sehingga tidak hanya pembicara (presenter) saja yang dapat menggunakan atau mengirimkan rekaman video dan audio kepada peserta (audience). Melainkan peserta juga dapat menggunakan rekaman video dan audio

116

untuk berkomunikasi, sehingga pelaksanaan seminar menjadi lebih interaktif.

2. Memperbaiki dan Menambahkan fitur baru pada panel presentasi seperti dapat memutar video atau menampilkan dokumen lain seperti pdf, excel, atau word. Sehingga penggunaannya tidak hanya terbatas pada menampilkan slide presentasi (.ppt) saja.

3. Menambahkan fitur rekaman presentasi, sehingga pengguna yang tidak sempat mengikuti seminar pada waktu yang ditentukan dapat melihat hasil rekaman presentasi sebelumnya.

4. Memperbaiki tampilan antarmuka sehingga dapat terlihat lebih baik dan terkesan profesional.

2.2.8.1Jenis-Jenis Flowmap

Flowmap terbagi menjadi 5 bagian. Berikut adalah pembagiannya. 1. Bagan alir sistem (sistems flowmap)

Bagan alir sistem (system flowmap) merupakan bagan yang menunjukkan arus pekerjaan secara keseluruan dari sistem. Bagan menjelaskan urutan-urutan dari prosedure-prosedure yang ada dalam sistem. Bagan alir sistem menunjukan apa yang dikerjakan sistem.

2. Bagan alir dokumen (document flowmap)

Bagan alir dokumen (document flowmap) atau disebut bagan alir formulir (form flowmap) atau paperwork flowmap merupakan bagan alir yang menunjukan arus dari laporan dan formulir termasuk tembusan-tembusannya. Bagan alir dokumen ini menggunakan simbol-simbol yang sama dengan yang digunakan di dalam bagan alir sistem.

3. Bagan alir skematik (schematic flowmap)

Bagan alir skematik (schematic flowmap) merupakan bagan alir yang mirip dengan bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem. Perbedaannya adalah bagan alir skematik menggunakan simbol-simbol bagan alir sistem , juga menggunakan gambar - gambar komputer dan peralatan lainnya yang digunakan. Maksud penggunaan gambar-gambar ini adalah untuk memudahkan komunikasi kepada orang yang kurang paham dengan simbol-simbol bagan alir.

4. Bagan alir program (program flowmap)

Bagan alir program (program flowmap) merupakan bagan yang menjelaskan secara rinci langkah-langkah dari proses program.

5. Bagan alir proses (process flowmap)

Bagan alir proses (process flowmap) merupakan bagan alir yang banyak digunakan teknik industri. Bagan alir juga berguna bagi anilis sistem untuk menggambarkan proses dalam suatu prosedure.

38

2.2.8.2Pedoman Pembuatan Flowmap

Bila seorang analis dan programmer akan membuat flowmap , ada beberapa petunjuk yang harus diperhatikan, seperti :

1. Flowmap digambarkan dari halaman atas ke bawah dan kiri ke kanan. 2. Aktivitas yang digambarkan harus didefinisikan secara hati-hati dan

definisi ini harus dapat di mengerti oleh pembacanya.

3. Kapan aktivitas dimulai dan berakhir harus di tentukan secara jelas. 4. Setiap langkah dari aktivitas harus berada pada urutan yang benar.

5. Lingkup dan range dari aktifitas yang sedang di gambarkan harus di telusuri dengan hati-hati.

6. Gunakan simbol-simbol flowmap yang standar.

2.2.9 Sublime Text

Sublime Text adalah aplikasi text editor yang digunakan untuk membuka file apapun namun sejatinya para programmer menggunakannya untuk menulis code. Sublime text mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML, ASP dan banyak lagi [22].

Untuk saat ini versi paling terbaru adalah sublime Text 3. Sublime Text memiliki beberapa kelebihan, diantaranya adalah sebagai berikut.

1. Goto anything

Ini digunakan untuk membuka file diawali dengan menarik satu project file yang sedang kita kerjakan pada sublime kemudian dengan menekan CTRL+P maka kita dapat mencari file apa yang akan kita buka dengan menuliskan nama filenya, juga kita dapat mencari baris kata dengan keyword # atau @ untuk melompat ke simbol setelah menekan CTRL+P. 2. Multiple Selection

Berfungsi untuk membuat perubahan pada code pada saat yang sama dalam beberapa baris yang berbeda. Bisa dicoba dengan menekan CTRL+L, atau bisa mengganti kata yang sama dalam baris berbeda dengan mem-blok kata yang akan diganti kemudian tekan CTRL+D.

Untuk fungsi yang satu ini jarang digunakan sebenarnya namun dalam fungsi ini banyak sekali hal yang bisa dilakukan seperti menutup semua file,

convert case, lower case, remove tag dan masih banyak lagi. dengan menekan CTRL+SHIFT+P.

4. Distraction Free Mode

Digunakan untuk merubah tampilan menjadi layar penuh, dibutuhkan ketika user akan fokus pada kerjaan yang dikerjakan maka dengan fungsi ini akan sangat membantu dengan menekan SHIFT+F11.

5. Split Editing

Memperbolehkan mengedit file berdampingan, atau mengedit dua lokasi pada satu file dengan beberapa baris dan kolom yang anda inginkan. dengan cara : masuk ke menu FILE > New menu into File.

6. Instant Project Switch

Sublime text akan mengcapture semua kerjaan pada file project yang sedang dibuka termasuk file yang dirubah dan belum di save, anda dapat beralih ke file lain dengan cara yang mirip fungsi Goto anything, dan hasil modifikasi anda akan di kembalikan pada waktu proyek dibuka kembali. 7. Plugin API Switch

Teks Sublime memiliki kekuatan, berbasis Python Plugin API. Seiring dengan API, ia datang dengan built in Python konsol secara interaktif bereksperimen secara real time.

8. Customize Anything

Bindings Key, Menu, Snippets, Macro, Penuntasan dan banyak lagi. Segala sesuatu di Teks Sublime disesuaikan dengan file JSON sederhana. Sistem ini memberi Anda fleksibilitas pengaturan dapat ditentukan pada jenis per-file dan per-proyek dasar.

9. Cross Platform

Yang paling tak kalah keren sublime tersedia untuk berbagai platform, Windows, Linux, OS X satu lisensi untuk semua yang anda butuhkan apapun sistem oprasi yang digunakan. Teks Sublime menggunakan toolkit UI custom, dioptimalkan untuk kecepatan dan keindahan.

115

BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Setelah melakukan analisis, perancangan, implementasi beserta pengujian, maka kesimpulan yang dapat diambil pada penelitian ”Implementasi Node.JS, AJAX, Dan HTML5 Pada Pembangunan Aplikasi Real-Time Presentation Untuk Seminar Online” adalah sebagai berikut :

1. Dengan menerapkan aplikasi seminar online ini, perusahaan dapat menekan biaya pelaksanaan seminar dalam hal keperluan sewa gedung atau aula untuk melaksanakan seminar.

2. Dengan menerapkan aplikasi seminar online ini, perusahaan dapat menjangkau peserta seminar dimanapun mereka berada selama terkoneksi dengan internet. Dikarenakan aplikasi ini dapat berjalan secara online, sehingga peserta yang berada di tempat yang berbeda-beda dapat mengikuti seminar secara serempak dalam waktu yang sama.

3. Perusahaan tidak perlu lagi menentukan jumlah kursi yang harus disediakan ketika akan melaksanakan acara seminar, dan perusahaan dapat mengetahui berapa jumlah peserta yang akan mengikuti seminar sehingga perusahaan dapat merubah atau membatalkan acara seminar apabila peserta yang menghadiri seminar sedikit atau tidak sesuai dengan yang telah direncanakan.

5.2 Saran

Agar aplikasi seminar online ini kedepanya dapat berjalan dengan lebih baik, maka yang dapat disarankan adalah :

1. Penambahan proses komunikasi yang dapat berjalan secara dua arah, sehingga tidak hanya pembicara (presenter) saja yang dapat menggunakan atau mengirimkan rekaman video dan audio kepada peserta (audience). Melainkan peserta juga dapat menggunakan rekaman video dan audio

116

untuk berkomunikasi, sehingga pelaksanaan seminar menjadi lebih interaktif.

2. Memperbaiki dan Menambahkan fitur baru pada panel presentasi seperti dapat memutar video atau menampilkan dokumen lain seperti pdf, excel, atau word. Sehingga penggunaannya tidak hanya terbatas pada menampilkan slide presentasi (.ppt) saja.

3. Menambahkan fitur rekaman presentasi, sehingga pengguna yang tidak sempat mengikuti seminar pada waktu yang ditentukan dapat melihat hasil rekaman presentasi sebelumnya.

4. Memperbaiki tampilan antarmuka sehingga dapat terlihat lebih baik dan terkesan profesional.