• Tidak ada hasil yang ditemukan

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

N/A
N/A
Protected

Academic year: 2017

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

Copied!
56
0
0

Teks penuh

(1)
(2)
(3)
(4)

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 : [email protected]

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)

(5)

SKRIPSI

Diajukan untuk Menempuh Ujian Akhir Sarjana

ANGGA NUGRAHA

10111655

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

(6)

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 mengijinkan penulis melakukan penelitian di TIENS Group, dan juga telah membantu penulis dalam menyediakan segala keperluan yang digunakan dalam penelitian ini.

(7)

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

(8)

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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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].

(14)

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].

(15)

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.

(16)

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.

(17)

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.

(18)

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

(19)

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

(20)

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]

(21)

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

(22)

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

(23)

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.

(24)

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

(25)

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”.

(26)

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].

(27)

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.

(28)

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

(29)

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

(30)

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. ketika posisi kursor berpindah dari suatu objek (Lost Focus) posisi kursor berada pada suatu objek.

onChange Select List, TextArea, TextField

(31)

onSelect TextField, TextArea

menjalankan kode Javascript ketika teks didalam area objek diseleksi.

onError Gambar, Window.

Menjalankan kode Javascript ketika terjadi error pada prosedur tertentu.

onLoad Gambar, Window.

Menjalankan kode Javascript ketika gambar atau halaman akan ditampilkan. 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!‛);

}

(32)

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

(33)

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

(34)

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].

(35)

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

(36)

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

(37)

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

(38)

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!");

(39)

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

(40)

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;

(41)

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;

}

(42)

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

(43)

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

(44)

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].

(45)

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.

(46)

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)

(47)

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

(48)

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

(49)

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

(50)

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”.

(51)

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

(52)

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.

(53)

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

(54)
(55)

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 :

(56)

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.

Gambar

Gambar 1.1 Waterfall Model
Gambar 2.1 Logo Tiens Syariah
Gambar 2.2 Cara Kerja Webinar
Tabel 2.1 Daftar Event Javascript
+7

Referensi

Dokumen terkait