PERANCANGAN WEB KORAN PELAJAR YOGYAKARTA BERBASIS WEB SERVICE SOAP DAN CSS FRAMEWORK FOUNDATION 4
NASKAH PUBLIKASI
diajukan oleh Saddam Habibie 10.11.4067
Kepada JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2014
PENGESAHAN
ii
DESIGN OF WEB KORAN PELAJAR YOGYAKARTA BASED SOAP WEB SERVICE AND CSS FRAMEWORK FOUNDATION 4 PERANCANGAN WEB KORAN PELAJAR YOGYAKARTA BERBASIS WEB SERVICE SOAP DAN CSS FRAMEWORK FOUNDATION 4 Saddam Habibie M. Rudyanto Arief Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA
ABSTRACT Web Koran Pelajar Yogyakarta is a news portal web which administer Web Services technology. The main function of Web Koran Pelajar Yogyakarta is bringing together all the information about educational institutions (which already has the web) in Yogyakarta. How this system works is when a user selects a news menu in educational institutions page, the system will perform fetching news data from educational institutions web databases then displayed it on the web Koran Pelajar Yogyakarta. Web Koran Pelajar Yogyakarta featuring the educational institution's latest news information, agenda and its profile. Moreover web Koran Pelajar Yogyakarta provide facilities for visitors who had become a member in order to participate to fill out web content. To display information from other web, this system utilizes the technology of Web Service SOAP (Simple Object Access Protocol). As for the interface design, this system utilizes CSS Framework Foundation 4. Web Koran Pelajar Yogyakarta is built using Adobe Dreamweaver software, for web services simulation using WAMP Server.and with a blend of HTML, PHP, CSS and JavaScript languages. Keywords: Web Services, SOAP, News Portal, Student Newspaper Yogyakarta, CSS Framework Foundation 4
iii
1.
Pendahuluan Pada era digital ini banyak media cetak yang memigrasikan produk mereka ke media
digital. Salah satu media digital yang saat ini terus berkembang adalah web. Web secara teknis adalah sebuah sistem dengan informasi yang disajikan dalam bentuk teks, gambar, suara dan lain-lain yang tersimpan dalam sebuah server web internet yang disajikan dalam bentuk hiperteks. Menurut Kumar, dkk (2004:8), “Web dan Internet menawarkan media yang unik bagi perusahaan untuk melampaui batas-batas geografis.” Tidak hanya media cetak saja yang mulai mengarahkan jasa atau produk mereka ke media digital, namun lembaga pendidikan, perusahaan swasta hingga milik negara pun sudah mulai menggunakan teknologi web. Alasan mereka menggunakan teknologi web ini pun berbeda-beda. Contohnya adalah sekolah sebagai lembaga pendidikan yang khususnya terletak di daerah Yogyakarta. Sekolah menggunakan teknologi web ini untuk tujuan memperluas dan meningkatkan peluang bisnis, promosi, menampilkan informasi terkini tentang sekolah terkait dan informasi lainnya. Kedepannya teknologi web ini akan mulai banyak digunakan karena menurut Kumar, dkk (2004:8), “keuntungan menggunakan web melebihi tantangan,sehingga tampaknya semakin banyak lembaga dan perusahaan tergantung pada web untuk globalisasi dan pertumbuhan.” Di Yogyakarta, beberapa lembaga pendidikan telah memiliki web-nya masingmasing. Namun, bagi pelajar yang berkeinginan untuk melanjutkan pendidikannya di Yogyakarta, letak informasi yang diperlukan tidak terintegrasi. Dengan kata lain informasi dari masing-masing lembaga pendidikan terpisah dengan alamat web yang berbeda antara satu dengan yang lainnya. Penulis merancang sebuah simulasi sistem berbasis web yang bernama Web Koran Pelajar Yogykarta. Web Koran Pelajar Yogyakarta merupakan sebuah simulasi website berteknologi web services dengan kemampuan fetching content dari database eksternal untuk ditampilkan di halaman web Koran Pelajar Yogyakarta secara terintegrasi. 2.
Landasan Teori
2.1
Defnisi Web
1
World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai computer yang terhubung ke Internet. Web pada awalnya adalah
1
Betha Sidik, Pemrograman Web dengan HTML Revisi Ketiga (Bandung: Informatika, 2010), Hal. 1
1
ruang informasi dalam Internet, dengan menggunakan teknologi hyperteks, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web. Kini Internet identik dengan web, karena kepopuleran web sebagai standar interface pada layanan – layanan yang ada di Internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).” Cara Kerja WWW adalah sebagai berikut.
2
a. Informasi web disimpan dalam dokumen yang disebut dengan halaman – halaman web (Web Pages). b. Web Page adalah file – file yang disimpan dalam computer yang disebut dengan server – server web (Web Servers). c.
Komputer – komputer membaca Web Page disebut sebagai Web Client.
d. Web Client menampilkan page dengan menggunakan program yang disebut dengan browser web (Web Browser). 2.2
Web Service
2.2.1
Definisi Web Service
3
Web Service adalah kumpulan protokol yang terbuka dan standar yang digunakan untuk pertukaran data antara aplikasi atau sistem. Aplikasi perangkat lunak yang ditulis dalam berbagai bahasa pemrograman dan berjalan pada berbagai platform dapat menggunakan Web Service untuk pertukaran data melalui jaringan komputer seperti internet 2.2.2
Arsitektur Web Service
4
Ada dua cara untuk memahami arsitektur web service, yang pertama adalah memahami peran dari masing-masing peran yang ada dalam web service, yang kedua adalah memahami web service protocol stack. 2.2.2.1 Peran dalam Web Service
5
2
Betha Sidik, Pemrograman Web dengan HTML Revisi Ketiga (Bandung: Informatika, 2010), Hal. 4 3 “What are Web Services”, Tutorialspoint, diakses dari http://www.tutorialspoint.com/webservices/what_are_web_services.htm, pada tanggal 16 Maret 2014. 4 “Web Service Architecture”, Tutorialspoint, diakses dari http://www.tutorialspoint.com/webservices/web_services_architecture.htm, pada tanggal 16 Maret 2014.
2
Web Service memiliki tiga peran utama dalam arsitekturnya, diantaranya adalah sebagai berikut. a. Service Provider, merupakan pemilik web service yang berfungsi menyediakan kumpulan operasi dari web service. b. Service Requestor, merupakan aplikasi yang bertindak sebagai klien dari web service yang mencari dan memulai interaksi terhadap layanan yang disediakan. c.
Service Registry, merupakan tempat dimana service provider mempublikasikan layanannya. Pada arsitektur web service, service registry bersifat opsional.
Gambar 2.1 Peran dalam Web Service
6
2.2.2.2 Web Service Protocol Stack Pilihan kedua untuk melihat arsitektur web service adalah dengan memahami web service protocol stack. Berikuti di bawah ini adalah empat lapisan utama web service protocol stack. a.
Service Transportation Lapisan ini bertanggung jawab untuk mengangkut pesan di antara aplikasi. Saat
ini, lapisan ini termasuk hypertext transfer protocol (HTTP), Simple Mail Transfer Protocol (SMTP), file transfer protocol (FTP), dan protokol yang lebih baru, seperti Blok Extensible Efek Protocol (BIP). 5
“An Introduction to Web Service”, Dev Article, diakses dari http://www.devarticles.com/c/a/Web-Services/An-Introduction-to-Web-Services/, pada tanggal 16 Maret 2014. 6 http://www.devarticles.com/c/a/Web-Services/An-Introduction-to-Web-Services/
3
Saat ini, HTTP adalah pilihan protokol yang paling populer untuk layanan transportasi. HTTP sederhana, stabil, dan banyak digunakan. Selain itu, sebagian firewall mengizinkan lalu lintas HTTP. Hal ini memungkinkan pesan XML-RPC atau SOAP untuk berlaku sebagai pesan HTTP. b.
XML Messaging Lapisan ini bertanggung jawab untuk encoding pesan ke dalam format XML,
sehingga pesan dapat dipahami oleh kedua belah pihak yang bersangkutan. Saat ini, lapisan ini termasuk XML - RPC dan SOAP. c.
Service Description Lapisan ini bertanggung jawab untuk menggambarkan antarmuka web service
kepada publik. Saat ini, deskripsi web service ditangani melalui Web Service Description Language (WSDL). d.
Service Discovery Lapisan ini bertanggung jawab untuk memusatkan layanan ke dalam registry
umum, menyediakan kemudahan untuk mempublikasikan layanan atau menemukan fungsi. Saat ini, service discovery ditangani melalui Universal Description, Discovery, dan Integration (UDDI). 2.2.3
SOAP
7
Selama beberapa tahun terakhir, tiga teknologi utama telah muncul sebagai standar di seluruh dunia yang membentuk inti dari teknologi web service saat ini, yaitu XML-RPC, SOAP dan WSDL. SOAP adalah singkatan dari Simple Object Access Protocol. SOAP adalah sebuah protokol berbasis XML untuk pertukaran informasi antar komputer. SOAP dirancang untuk berkomunikasi melalui internet. SOAP dapat memperluas HTTP untuk pesan XML. SOAP menyediakan transportasi data untuk Web Service. SOAP dapat saling bertukar dokumen lengkap atau memanggil remote prosedur. SOAP adalah cara XML mendefinisikan apa dan bagaimana suatu informasi akan dikirim. Sebuah pesan SOAP adalah sebuah dokumen XML yang mengandung elemen - elemen berikut. a. Envelope (Wajib) adalah elemen yang mendefinisikan awal dan akhir pesan.
7
“What is SOAP”, Tutorialspoint, diakses dari http://www.tutorialspoint.com/soap/what_is_soap.htm, pada tangal 16 Maret 2014.
4
b. Header (Opsional) adalah elemen yang berisi atribut opsional dari pesan yang digunakan dalam pengolahan pesan, baik pada titik perantara atau pada titik tujuan akhir. c.
Body (Wajib) adalah elemen yang berisi data XML yang terdiri dari pesan yang dikirim.
d. Fault (Opsional) adalah Sebuah elemen opsional yang memberikan informasi tentang kesalahan yang terjadi ketika memproses pesan
Gambar 2.2 Struktur SOAP Messages 2.2.2.3 NuSOAP
8
9
NuSOAP adalah sekelompok kelas PHP yang memungkinkan pengembang untuk membuat dan mengkonsumsi web service SOAP. NuSOAP tidak memerlukan ekstensi PHP khusus. NuSOAP mendukung spesifikasi SOAP 1.1. NuSOAP dapat menghasilkan WSDL 1.1 dan juga mengkonsumsinya untuk digunakan dalam serialisasi.
Saat
ini,
versi
terbaru dari NuSOAP adalah versi 0.9.5. NuSOAP dapat diunduh melalui alamat „http://sourceforge.net/projects/nusoap/‟. 3.
Analisis dan Perancangan Web Koran Pelajar Yogyakarta (KPY) menggunakan teknologi Web Service.
Teknologi ini memiliki fungsi untuk melakukan fetching data konten dari website luar (database eksternal) sehingga dapat ditampilkan di dalam website KPY. Berikut adalah gambaran framework sistem KPY. 8
http://www.tutorialspoint.com/soap/soap_message_structure.htm “Introduction to NuSOAP”, Scott Nichol Consulting, diakses dari http://www.scottnichol.com/nusoapintro.htm, pada tanggal 18 Maret 2014. 9
5
User Request
Response Data
Data SMAN 1 Teladan Database
DATABASE TABLE
Request
Data Response
KPY Website
Request
SQL Query
DATABASE
KPY Database
Data Response
TABLE
Data
Gambar 3.1 Framework Sistem Koran Pelajar Yogyakarta 3.1
Perancangan Tampilan Halaman Lembaga Pendidikan Halaman lembaga pendidikan pada web Koran Pelajar Yogyakarta adalah halaman
yang mengampu teknologi web service. Pada halaman ini lah terjadi request dan response data antara web Koran Pelajar Yogyakarta dan eksternal database (website lain). Berikut di bawah ini adalah perancangan halaman utama, halaman daftar berita dan agenda, halaman tentang lembaga pendidikan (profil lembaga pendidikan) serta halaman detail berita pada halaman lembaga pendidikan.
Gambar 3.2 Tampilan Halaman Utama Lembaga Pendidikan
6
Gambar 3.3 Daftar Berita atau Agenda
Gambar 3.4 Tampilan Halaman Profil Lembaga Pendidikan
7
Gambar 3.5 Tampilan Halaman Detail Berita Website KPY
4.
Implementasi dan Pembahasan Setelah perancangan sebelumnya diimplementasikan, maka akan didapatkan
tampilan seperti pada gambar 4.1, 4.2, 4.3, 4.4. Pada gambar halaman utama lembaga pendidikan, ketika user menekan salah satu dari ketiga menu utama yang ada, maka sistem langsung akan melakukan request kepada eksternal database melalui web service, lalu eksternal database memberikan response data yang direquest sebelumnya. Response dan request pada halaman ini terjadi ketika user menekan menu Berita Sekolah, Agenda Sekolah, Tentang Sekolah dan menu untuk menampilkan detail berita (selanjutnya, baca). Perhatikan gambar – gambar di bawah ini.
8
Gambar 4.1 Tampilan Halaman Utama Lembaga Pendidikan
Gambar 4.2 Tampilan Daftar Berita dan Agenda
9
Gambar 4.3 Tampilan Halaman Profil Lembaga Pendidikan
10
4.4 Tampilan Halaman Detail Berita Lembaga Pendidikan 5.
Kesimpulan Kesimpulan yang dapat diambil dalam pengembangan sistem ini adalah simulasi
web Koran Pelajar Yogyakarta adalah sistem yang berbasis web dan dibangun menggunakan kombinasi HTML 5, PHP 5, Javascript, Framework CSS Foundation 4 serta NuSOAP 0.9.5 (PHP library untuk menghasilkan SOAP Message dan WSDL secara otomatis). Web Koran Pelajar Yogyakarta mengampu teknologi web service untuk melakukan fetching data dari database eksternal (website lain) untuk kemudian ditampilkan pada halaman website Koran Pelajar Yogyakarta secara terintegrasi. Response dan Request pada web Koran Pelajar Yogyakarta ditangani oleh script PHP. Sedangkan dalam mengirimkan data yang telah di-fetching ke halaman web Koran Pelajar Yogyakarta, web Koran Pelajar Yogykarta menggunakan SOAP Message. Lalu ditampilkan dalam bentuk dokumen HTML pada halaman web Koran Pelajar Yogyakarta. Daftar Pustaka Anonim. An Introduction to Web Service. Dev Articles, http://www.devarticles.com/c/a/WebServices/An-Introduction-to-Web-Services/ (Diakses 16 Maret 2014). Anonim. SOAP Message Structure. Tutorialspoint, http://www.tutorialspoint.com/soap/soap_message_structure.htm (Diakses 16 Maret 2014). Anonim. What are Web Services. Tutorialspoint. http://www.tutorialspoint.com/webservices/what_are_web_services.htm (16 Maret 2014).
11
Anonim. What is SOAP. Tutorialspoint, http://www.tutorialspoint.com/soap/what_is_soap.htm (Diakses 16 Maret 2014). Anonim. Web Service Architechture. Tutorialspoint, http://www.tutorialspoint.com/webservices/web_services_architecture.htm (Diakses 16 Maret 2014). Fatta, Hanif Al. 2007. Analisis dan Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan dan Organisasi Modern. Andi: Yogyakarta. Kumar, B. V. dkk. 2004. Web Services. Tata McGraw-Hill Education. Nichol, S. Introduction to NuSOAP. Scott Nichol Consulting, http://www.scottnichol.com/nusoapintro.htm (Diakses 18 Maret 2014). Sidik, Betha. 2010. Pemrograman Web dengan HTML Revisi Ketiga. Informatika: Bandung.
12
