Pengembangan Web Portal Berita [PDF]

Citation preview

LAPORAN KERJA PRAKTEK



PERANCANGAN USER INTERFACE WEB PORTAL BERITA (BERITA SATU MEDIA HOLDINGS)



Diajukan Untuk Memenuhi Persyaratan Mata Kuliah Kerja Praktek Pada Program Studi Teknik Informatika Fakultas Ilmu Komputer Universitas Esa Unggul



Disusun oleh : Nama : Rizky Erlangga NIM : 20160801149



PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL JAKARTA 2019



LEMBAR PENGESAHAN LAPORAN KERJA PRAKTEK Nama



: Rizky Erlangga.



NIM



: 2016-0801-149.



Program Studi



: Teknik Informatika.



Fakultas



: Ilmu Komputer.



Judul Laporan



: Perancangan User Interface Web Portal Berita (Berita Satu Media Holdings).



Diajukan sebagai syarat untuk memenuhi pelaksanaan Kerja Praktek Pada Program Studi Teknik Informatika Fakultas Ilmu Komputer Universitas Esa Unggul.



Jakarta, 26 November 2019 Menyetujui,



Dr. Gerry Firmansyah, S.T, M.Kom. Pembimbing Materi



Denny Triawan Pembimbing Lapangan



Mengetahui,



Malabay, S.Kom, M.Kom Ka. Prodi Teknik Informatika



i



KATA PENGANTAR Dengan mengucapkan syukur kepada Tuhan yang maha kuasa yang telah memberikan rahmat serta nikmatnya kepada penulis dan atas karunianya penulis dapat menyelesaikan penyusunan Laporan Kerja Praktek yang berjudul “Perancangan User Interface Web Portal Berita (Berita Satu Media Holdings)” dengan tepat pada waktunya. Penyusunan Proposal Tugas Akhir ini tidak terlepas dari dukungan serta bantuan dari beberapa pihak baik berupa moril, materiil ataupun motivasi. Oleh karena itu penulis ingin mengucapkan rasa terima kasih kepada: 1. Bapak Dr. Ir. Husni Setiawan Sastramihardja, M.T selaku Dekan Fakultas Ilmu Komputer. 2. Bapak Malabay, S.Kom, M.Kom selaku Ka. Prodi Teknik Informatika. 3. Bapak Dr. Gerry Firmansyah., selaku Dosen pembimbing penulis dalam menyelesaikan penyusunan Laporan Kerja Praktek. 4. Kedua Orang Tua dan Kakak-kakak yang senantiasa selalu memberikan motivasi, dukungan, dan doa kepada penulis sehingga dapat menyelesaikan Laporan Kerja Praktek. 5. Seluruh staff digital team khususnya kepada Bapak Denny Triawan sebagai pembimbing Lapangan yang telah memberikan berbagai informasi yang dibutuhkan untuk membuat web. 6. Terima kasih kepada teman dan sahabat baik penulis: Muhammad Rasyiddin, Argana Phangquestian, Rahmat Deni Wijayanto, Sony Setiawan, Muhamad Rizky, Lifendry Januar, Muhammad Naufal Fadillah, Nerissa Arviani, Adhya Pandunagri, Faisal Akbar, Joshua Adrian, Ibnu Akbar. 7. Kepada teman-teman, FALCER 2016 dan Keluarga Besar Fakultas Ilmu Komputer seluruh angkatan, khususnya Angkatan 2016. Terima kasih atas dukungan dan bantuannya! 8. Semua pihak yang tidak dapat disebutkan satu per satu yang terlibat dalam penyusunan Tugas Akhir ini sehingga selesai tepat pada waktunya.



ii



Penulis menyadarin bahwa Laporan Kerja Praktek ini masih memilki kekurangan, oleh karena itu penulis berharap masukan dan saran dalam penulisan tersebut serta masih dapat dilakukan pengembangan untuk penyempurnaan dari apa yang penulis buat.



Jakarta, 26 November 2019



Rizky Erlangga penulis



iii



DAFTAR ISI



LEMBAR PENGESAHAN LAPORAN KERJA PRAKTEK ...................................... i KATA PENGANTAR ................................................................................................... ii DAFTAR ISI ................................................................................................................. iv DAFTAR GAMBAR .................................................................................................... vi DAFTAR TABLE ........................................................................................................ vii BAB I PENDAHULUAN ............................................................................................... 1 1.1



Latar Belakang ................................................................................................. 1



1.2



Identifikasi Masalah ......................................................................................... 2



1.3



Tujuan .............................................................................................................. 2



1.4



Batasan Masalah .............................................................................................. 2



1.5



Manfaat Kerja Praktek ..................................................................................... 2



1.6



Sistematika Penulisan....................................................................................... 3



BAB II LANDASAN TEORI ........................................................................................ 4 2.1



Teori-Teori Khusus .......................................................................................... 4



2.1.1



Perancangan ............................................................................................. 4



2.1.2



Aplikasi .................................................................................................... 5



2.1.3



Website..................................................................................................... 5



2.2



Teori – Teori Umum ........................................................................................ 6



2.2.1



HTML ...................................................................................................... 6



2.2.2



PHP (Hypertext Preprocessor) ................................................................. 6



2.2.3



CSS .......................................................................................................... 6



2.2.4



XAMPP .................................................................................................... 7



2.2.5



Framework ............................................................................................... 7



2.3



Content Management System ( CMS ) .............................................................. 8



2.4



UML (Unified Modelling Languange) ............................................................. 9



2.3.1



Use Case Diagram ....................................................................................... 9



2.3.2



Activity Diagram ....................................................................................... 10



BAB III GAMBARAN UMUM BERITA SATU MEDIA HOLDINGS ................... 12 iv



3.1



Profil Utama Berita Satu Media Holdings ...................................................... 12



3.2



Misi Berita Satu Media Holdings ................................................................... 12



3.3



Produk Berita Satu Media Holdings ............................................................... 12



3.3.1



BeritaSatu.com ....................................................................................... 12



3.3.2



Jakarta Globe .......................................................................................... 13



3.3.3



Globe Asia .............................................................................................. 14



3.3.4



Suara Pembaruan .................................................................................... 14



3.4



Logo Berita Satu Media Holdings .................................................................. 14



3.5



Struktur Organisasi Digital Team ................................................................... 15



BAB IV HASIL DAN PEMBAHASAN ...................................................................... 16 4.1



Metode Pelaksanaan Kerja Praktek ................................................................ 16



4.1.1



Tempat Kerja Praktek ................................................................................ 16



4.1.2



Waktu Kerja Praktek .................................................................................. 16



4.2



Analisis Sistem yang Sedang Berjalan............................................................ 16



4.3



Rancangan Solusi Usulan Aplikasi ................................................................. 17



4.3.1



Use Case Diagram Rancangan Usulan Web Portal Berita .......................... 18



4.3.2



Use Case Description Usulan Web Portal Berita ........................................ 19



4.3.2



Activity Diagram User Interface Web Portal Berita ................................... 22



4.4



Tampilan Web Portal Berita ........................................................................... 23



BAB V KESIMPULAN DAN SARAN........................................................................ 29 5.1



Kesimpulan .................................................................................................... 29



5.2



Saran .............................................................................................................. 29



DAFTAR PUSTAKA................................................................................................... 30



v



DAFTAR GAMBAR Gambar 1. Logo Berita Satu Media Holdings ............................................................ 14 Gambar 2. Struktur Organisasi Digital Team ........................................................... 15 Gambar 3. Use Case Diagram Rancangan Usulan ..................................................... 18 Gambar 4. Activity Diagram Rancangan Usulan User Interface .............................. 22 Gambar 5. Tampilan Homepage ................................................................................. 23 Gambar 6. Tampilan Homepage 2 .............................................................................. 24 Gambar 7. Tampilan Index Lanjutan ........................................................................ 25 Gambar 8. Detail Post ................................................................................................. 26 Gambar 9. Search Page ............................................................................................... 27 Gambar 10. CMS Page ................................................................................................ 28



vi



DAFTAR TABLE Table 1. Use Case Simbol ............................................................................................ 10 Table 2. Simbol Activity Diagram............................................................................... 11 Table 3 Use Case Deskripsi Homepage ....................................................................... 19 Table 4. Use Case Deskripsi Kategori ......................................................................... 19 Table 5. Use Case Deskripsi Detail Post ..................................................................... 19 Table 6. Use Case Deskripsi Search Post .................................................................... 20 Table 7. Use Case Deskripsi Search Post .................................................................... 20 Table 8. Use Case deskripsi Akses Halaman CMS .................................................... 20 Table 9. Use Case Deskripsi Tambah Artikel............................................................. 21 Table 10. Use Case Diagram Deskripsi Tambah Headline ........................................ 21 Table 11.Use Case Diagram Deskripsi Tambah Media ............................................. 21



vii



BAB I PENDAHULUAN 1.1



Latar Belakang Pada era digital ini sudah sangat cepat dalam penyampaian berita dan menerima sebuah berita sudah tidak bisa dihindari lagi. Dengan penyebaran yang cepat sehingga berita yang benar dan sebuah hoax sudah bercampur aduk. Berita yang akurat dan hoax sudah sangat sulit dibedakan karena berita hoax sangat mudah sekali dalam penyebarannya terutama di sosial media sehingga hal ini merugikan para pembaca. Penyampaian berita yang sering dijumpai di Indonesia sekarang ini sudah banyak melalui media digital seperti televisi, website dan aplikasi mobile sudah sangat jarang sekali orangorang membaca berita melalui koran maupun majalah. Karena dengan media digital orang yang ingin membaca berita dapat mengaksesnya dengan cepat, mudah, dan dimanapun. Web portal berita telah dimiliki hampir seluruh media massa yang ada di indonesia seperti salah satunya BeritaSatu. Berita Satu merupakan media massa yang menyediakan portal berita umum dengan fokus pada masalah politik, hukum, ekonomi dan sosial. Sebagai media massa Berita satu memiliki peran penting dalam penyebaran berita yang akurat dalam bentuk digital maupun tradisional untuk menghindari maraknya penyebaran berita hoax. BeritaSatu Media Holdings memiliki beberapa web portal berita seperti BeritaSatu.com, JakartaGlobe.id, SuaraPembaruan dan lainnya. BeritaSatu Media Holdings berencana menambah lagi web portal berita dengan UI/UX yang menarik dan responsive dengan konten yang tersedia di Content Management System untuk para pengunjung untuk membaca berita di web tersebut. Berdasarkan permasalahan yang telah dijelaskan, maka penulis membuat “Perancangan User Interface Web Portal Berita (BeritaSatu Media Holdings)” Perancangan web yang dibuat dengan menggunakan Framework CodeIgniter dan MySQL sebagai sistem manajemen basis data untuk menyimpan data berita yang diupload.



1



1.2



Identifikasi Masalah Berdasarkan latar belakang yang telah dijelaskan diatas, maka identifikasi masalah yaitu : 1. Bagaimana membuat tampilan UI/UX yang bagus agar pengunjung tertarik untuk membaca berita di web BeritaSatu ? 2. Bagaimana membuat tampilan web yang responsive ?



1.3



Tujuan Berdasarkan identifikasi masalah yang ada, maka diperoleh beberapa tujuan yaitu sebagai berikut : 1. Membuat Website portal berita untuk Berita Satu Media Holdings 2. Membuat tampilan UI/UX web yang bagus dan responsive agar para pengunjung tertarik untuk membaca berita di web BeritaSatu



1.4



Batasan Masalah Batasan masalah pada aplikasi yang dibuat adalah : 1. Aplikasi ini hanya berfokus pada pembuatan web portal berita. 2. Web ini tidak satu dengan website resmi Berita Satu Media Holdings. 3. Web ini tidak sepenuhnya selesai dan masih tahap pengembangan sehingga tidak dilakukan hosting.



1.5



Manfaat Kerja Praktek Adapun manfaat yang didapat, yaitu sebagai berikut : 1. Sebagai bentuk penerapan dari ilmu selama melakukan perkuliahan terhadap lingkungan pekerjaan. 2. Dapat menjalin hubungan relasi dengan perusaahan. 3. Dapat mengetahui dan memahami bagaimana kondisi lingkungan dunia kerja, dapat menambah wawasan, relasi dan kemampuan di dunia kerja.



2



1.6



Sistematika Penulisan Sistematika penulisan yang disusun dalam laporan ini adalah sebagai berikut: BAB I



PENDAHULUAN Pada bab ini dijelaskan mengenai hal yang terdiri dari latar belakang, perumusan masalah, batasan masalah, maksud dan tujuan kerja praktek, sistematika penulisan laporan kerja praktek.



BAB II



LANDASAN TEORI Pada bab ini berisi tentang teori-teori yang berhubungan dengan Judul Laporan kerja praktek.



BAB III



GAMBARAN UMUM INSTANSI Pada bab ini dijelaskan mengenai gambaran umum instansi, visi, misi, dan kondisi tempat kerja.



BAB IV



HASIL DAN PEMBAHASAN Pada bab ini berisi hasil perancangan dan pembuatan mengenai Aplikasi web portal berita di Berita Satu Media Holdings.



BAB V



KESIMPULAN DAN SARAN Pada bab ini berisi mengenai kesimpulan dan saran laporan kerja praktek.



3



BAB II LANDASAN TEORI Dalam landasan teori laporan ini terdapat 2 bagian yaitu teori-teori khusus dan teori-teori umum 2.1



Teori-Teori Khusus Dalam poin dibawah ini mengenai teori yang digunakan untuk mendukung penulisan laporan kerja praktek. 2.1.1 Perancangan Perancangan sisem adalah kegiatan merancang dan menentukan cara mengolah sistem informasi dari hasil analisa sistem sehingga dapat memenuhi kebutuhan dari pengguna termasuk perancangan user interface, data dan aktivitas proses (O’Brien dan Marakas, 2010). Menurut Jogiyanto (2010), Sistem dapat didefinisikan merupakan suatu pendekatan yang menggunakan prosedur dan komponen, sebuah sistem memiliki sepuluh karakteristik berikut: 1.



Komponen yang merupakan bagian-bagian, yang dapat, berbentuk nyata atau abstrak, dan disebut subsistem.



2.



Penghubung antar bagian merupakan sesuatu yang menghubungkansatu bagian dengan bagian lain, dan memungkinkan terjadinya interaksi/komunikasi antarbagian.



3.



Batas merupakan sesuatu yang membedakan antara sistem dengan sistem atau sistem-sistem lain.



4.



Lingkungan merupakan sesuatu yang berada diluar sistem dan bersifat menguntungkan atau merugikan sistem yang bersangkutan.



5.



Masukan yang merupakan bahan untuk diolah atau diproses oleh sistem.



6.



Mekanisme pengolahan merupakan perangkat dan prosedur untuk mengubah masukan menjadi keluaran dan menampilkannya.



7.



Keluaran merupakan berbagai macam bentuk hasil atau produk yang dikeluarkan dari pengolahan.



4



8.



Tujuan merupakan sesuatu atau keadaan yang ingin dicapai oleh sistem, baik dalam jangka pendek maupun jangka panjang.



9.



Sensor dan kendali merupakan sesuatu yang bertugas memantau dan menginformasikan perubahanperubahan didalam lingkungan dan dalam diri sistem kepada sistem.



10.



Umpan-balik merupakan informasi tentang perubahan lingkungan dan perubahan pada sistem.



2.1.2 Aplikasi Perangkat Lunak aplikasi merupakan perangkat lunak yang digunakan untuk memudahkan pemakai komputer untuk membantu pekerjaannya (J. Supriyono dan A. Pramadya, 2013). Aplikasi adalah program siap pakai yang digunakan untuk menjalankan perintahperintah dari pengguna aplikasi tersebut dengan tujuan mendapatkan hasil yang lebih akurat sesuai dengan tujuan pembuatan aplikasi tersebut, aplikasi mempunyai arti yaitu pemecahan masalah menggunakan salah satu teknik pemrosesan data aplikasi yang biasanya berpacu pada sebuah komputansi akan diinginkan atau diharapkan maupun pemrosesan data akan diharapkan (H. Abdurahman dan A. Riswaya, 2014). Dapat disimpulkan bahwa aplikasi merupakan sebuah program atau perangkat lunak yang dirancang bertujuan tertentu dengan melakukan aktifitas tertentu melalui proses dan prosedur aliran data dalam infrastruktur teknologi informasi yang sesuai dengan kebutuhan pengguna. 2.1.3 Website Webite adalah salah satu aplikasi yang berisikan dokumen dokumen multimedia (teks, gambar, suara, animasi, video) di dalamnya yang menggunakan protocol HTTP (hypertext transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser (Erinton dkk., 2017). 2.1.4 User Interface Desain antar muka (user interface) adalah seperangkat alat/elemen yang digunakan untuk memanipulasi objek digital (Roth, 2017). Rauschenberger dkk (2013) menyatakan



5



bahwa sebuah desain antar muka (user interface) dianggap bagus apabila dapat berfungsi dengan baik, tidak hanya mempertimbangkan aspek estetik saja. Dengan kata lain, dalam menentukan bentuk desain antar muka (user interface), tidak hanya dibutuhkan aspek estetik visual, namun juga harus mempertimbangkan aspek fungsi. 2.2



Teori – Teori Umum Menjelaskan teori-teori yang digunakan secara garis besar dalam menunjang isi dari Laporan Kerja Praktek dalam bab IV. 2.2.1 HTML HTML (HyperText Markup Language) adalah file teks ditulis dengan menggunakan aturan kode tertentu yang kemudian ditampilkan kepada user melalui suatu aplikasi web browser. Setiap informasi yang tampil di web dibuat dengan menggunakan kode HTML. Maka dari itu dokumen HTML sering disebut juga sebagai webpage atau halaman web (Raharjo dkk., 2014). 2.2.2 PHP (Hypertext Preprocessor) PHP (Hypertext Preprocessor) adalah bahasa script yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk membuat program situs web dinamis (MADCOMS, 2016). Sintak yang terdapat pada PHP memiliki kesamaan dengan bahasa C dengan menambahkan tag “ “. Berdasarkan tag tersebut server akan memahami kode PHP dan kemudian melakukan proses data dan hasilnya dikirim ke browser. 2.2.3 CSS CSS (Casecading Style Sheet) merupakan stylesheet language yang digunakan untuk mendeskripsikan penyajian dari dokumen yang dibuat dalam mark up language. CSS merupakan sebuah dokumen yang berguna untuk melakukan pengaturan pada komponen halaman web, inti dari dokumen ini adalah untuk memformat halaman web standar menjadi bentuk web yang memiliki keindahan dan menarik untuk dilihat (Binarso dkk., 2012).



6



2.2.4 XAMPP XAMPP merupakan sebuah perangkat lunak yang mendukung banyak sistem operasi. Berfungsi sebagai server yang berdiri sendiri (Localhost) yang terdiri atas program Apache HTTP Server, MySQL database dan penerjemah bahasa yang ditulis dengan PHP dan Perl (Palit dkk., 2015). 2.2.4.1 MySQL MySQL adalah sistem manajemen Database SQL yang bersifat Open Source dan paling popular saat ini. Sistem Database MySQL mendukung beberapa fitur seperti multithreaded, multi-user dan SQL Database managemen system (DBMS) (MADCOM, 2016). SQL merupakan bahasa standar digunakan untuk relational database management system (RDBMS). Penulisan sql dipergunakan untuk melakukan beberapa tugas seperti melakukan update data atau menampilkan data dari basis data. Untuk dapat melakukan tugas tersebut dibutuhkan Database management system (DBMS) seperti MySQL (Binarso dkk., 2012). 2.2.5 Framework Framework adalah kumpulan intruksi-intruksi yang dikumpulkan dalam class dan function-function dengan fungsi masing-masing untuk memudahkan developer dalam memanggilnya tanpa harus menuliskan syntax program yang sama berulang-ulang serta dapat menghemat waktu (Betha Sidik, 2012). 2.2.5.1 CodeIgniter CodeIgniter merupakan framework php yang bersifat open source dan menggunakan metode MVC (Model, View, Controller) untuk memudahkan developer atau programmer dalam membangun sebuah aplikasi berbasis web tanpa harus membuatnya dari awal (Betha Sidik, 2012). Codeigniter merupakan framework PHP yang kuat dan sedikit bug. Codeigniter ini dibangun untuk para pengembang dengan bahasa pemrogram PHP yang membutuhkan alat untuk membuat web dengan fitur lengkap (Official Website CodeIgniter, 2002).



7



2.2.5.2 MVC Menurut Destiningrum dan Adrian (2017), Codeigniter merupakan konsep MVC (Model View Controller) yang memungkinkan pemisahan antara layer application-logic dan presentation. Dengan konsep ini kode PHP, query Mysql, Javascript dan CSS dapat saling dipisahkan sehingga ukuran file menjadi lebih kecil dan lebih mudah dalam perbaikan kedepannya. i. Model merupakan program (berupa OOP class) yang digunakan untuk berhubungan dengan database MySQL sekaligus untuk memanipulasinya (input-edit-delete). ii. View Merupakan kode program berupa template atau PHP untuk menampilkan data pada browser. iii. Controller merupakan Kode program (berupa OOP class) yang digunakan untuk mengontrol aliran atau dengan kata lain sebagai pengontrol model dan view. 2.3



Content Management System ( CMS ) Content Management System ( CMS ) merupakan sebuah sistem yang digunakan untuk



mengelola dan memfasilitasi proses pembuatan, pembaharuan dan publikasi content secara bersama. Content mengacu pada informasi dalam bentuk teks, grafik, gambar maupun dalam format-format lain yang perlu dikelola dengan tujuan memudahkan proses pembuatan, pembaharuan, distribusi, pencarian, analisis,



dan meningkatkan fleksibilitas untuk



ditransformasikan ke dalam bentuk lain. Terminologi CMS sendiri cukup luas, di antaranya mencakup software aplication, database, arsip, workflow, dan alat bantu lainnya yang dapat dikelola sebagai bagian dari mekanisme jaringan informasi suatu perusahaan. (Sovia Elinawati & Muhammad, 2015)



Dengan adanya CMS yang terintegrasi dengan sebuah Website akan memberikan suatu nilai lebih yang akan meningkatkan fungsionalitas dan fleksibiltas dari Website tersebut, terlebih pada Website yang tujuan pemanfaatannya sebagai media promosi dan membangun citra konsumen, dimana kontinuitas dan inovasi dalam pemasaran produkproduk secara berkala dan berkesinambungan sebagai suatu hal yang memegang 8



peranan penting dalam tercapainya target pemasaran (Sovia Elinawati & Muhammad, 2015) 2.4



UML (Unified Modelling Languange) UML (Unified Modelling Languange) merupakan salah satu alat bantu yang handal di



dunia pengembangan sistem berorientasi obyek. Disebabkan karena UML menyediakan Bahasa pemodelan visual yang memungkinkan bagi pengembang sistem untuk membuat cetak atas visi mereka dalam bentuk yang baku, mudah dimengerti dan dilengkapi dengan mekanisme yang efektif untuk berbagi serta saling mengkomunikasikan rancangan mereka dengan bentuk yang lain (Munawar, 2018) 2.3.1 Use Case Diagram Use Case adalah deskripsi fungsi dari sebuah sistem dari perspektif pengguna. Use case bekerja dengan cara mendeskripsikan tipikal interaksi antara user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita bagaimana sebuah sistem dipakai. (Munawar, 2018). Menurut Sukamto dan Shalahuddin (2014), Use Case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi-fungsi itu. Nama



Simbol



Deskripsi Fungsionalitas yang disediakan sistem



Use Case



sebagai unit-unit yang saling bertukar pesan antar unit atau aktor; biasanya dinyatakan dengan menggunakan kata kerja frase nama use case. Orang, proses, atau sistem lain yang



Aktor



berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat. Komunikasi antara aktor dengan use



Asosiasi



caseyang berpatisipasi pada use case



9



atau use case yang memiliki interaksi dengan aktor. Ekstensi



Merupakan perluasan dari usecase lain



jika kondisi atau syarat terpenuhi. Hubungan generalisasi dan spesialisasi (umum-khusus) antar dua buah use



Generalisasi



case dimana fungsi yang satu adalah fungsi yang lebih umum dari yang lainnya. Relasi use case tambahan ke sebuah



Include



use case, dimana use case yang ditambahkan dapat berdiri sendiri.



Table 1. Use Case Simbol Sumber : ( Rosa dan Shalahuddin, 2014 )



2.3.2 Activity Diagram Activity diagram adalah bagian penting dari UML yang menggambarkan aspek dinamis dari sistem. Logika prosedural, proses bisnis dan aliran kerja suatu bisnis bisa dengan mudah dideskripsikan dalam activity diagram. Activity diagram mempunyai peran seperti halnya flowchart, akan tetapi perbedaannya dengan flowchart adalah activity diagram bisa mendukung perilaku parallel sedangkan flowchart tidak bisa (Munawar, 2018). Menurut Sukamto dan Shalahuddin (2014), Diagram aktivitas atau activity diagram menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah sistem atau proses atau menu yang ada pada perangkat lunak. Diagram aktivitas menggambarkan aktivitas sistem bukan apa yang dilakukan aktor, jadi aktivitas yang dapat dilakukan oleh sistem. GAMBAR



NAMA



KETERANGAN Memperlihatkan bagaimana masing-masing



aktivitas



kelas antarmuka saling berinteraksi satu sama lain



10



Asosiasi percabangan dimana jika ada pilihan



percabangan



aktivitas lebih dari satu



Status awal



Bagaimana objek dibentuk atau diawali.



Status akhir



Bagaimana objek dibentuk dan diakhiri Asosiasi penggabungan dimana lebih dari satu



penggabungan



aktivitas digabungkan menjadi satu. Memisahkan



Swimlane



organisasi



bisnis



yang



bertanggung jawab terhadap aktivitas yang terjadi. Table 2. Simbol Activity Diagram Sumber : ( Rosa dan Shalahuddin, 2014 )



11



BAB III GAMBARAN UMUM BERITA SATU MEDIA HOLDINGS 3.1



Profil Utama Berita Satu Media Holdings BeritaSatu Media Holdings adalah organisasi berita terkemuka dengan lebih dari 15 tahun pelayanan terhadap rakyat Indonesia. BeritaSatu Media Holdings atau dikenal dengan nama BeritaSatu Media (sebelumnya bernama Globe Media Group) merupakan sebuah perusahaan yang bergerak dalam bidang media. Perusahaan ini merupakan bagian dari Lippo Group.



Pada bulan Februari 2011, Globe Media Group membeli BeritaSatu.com, situs berita yang beroperasi sejak bulan Mei 2010. Pembelian situs ini semakin menambah panjang deretan media yang bernaung di bawah bendera Globe Media Group. Nama "BeritaSatu" kemudian menjadi merek dagang baru untuk kelompok media ini. 3 September 2011, BeritaSatu Media meluncurkan BeritaSatu TV. Ditahun 2014 diluncurkan Jakarta Globe News Channel dengan nama awal BeritaSatu English (disingkat BSE). Kemudian nama BSE resmi diganti menjadi Jakarta Globe News Channel (JGNC). Program unggulan JGNC adalah sebagian programprogam informasi unggulan BeritaSatu News Channel, yaitu Indonesia Higlights, Jurnal Ekstra dan DBS To The Point. 3.2



Misi Berita Satu Media Holdings Misi kami adalah menciptakan nilai sosial dengan tanpa henti mendukung pembangunan yang menyeluruh di Indonesia. Kami melakukan ini dengan memberikan jurnalisme yang imparsial, investigatif, dan berbasis data kepada para pembuat keputusan di Indonesia. Tim editorial pemenang penghargaan kami memberikan berita terkini, analisis menyeluruh, dan cerita bergerak di tujuh merek, tiga platform, dan dua bahasa.



3.3



Produk Berita Satu Media Holdings Berikut ini beberapa produk yang dimiliki oleh Beria Satu Media Holdings 3.3.1 BeritaSatu.com Era digital ditandai oleh kecepatan menyampaikan dan menerima berita. Namun, kecepatan dalam menyampaikan berita kadang tidak diimbangi oleh akurasi. Berita dan hoax acap bercampur aduk, sehingga pembaca dirugikan.



12



Menyadari pentingnya media massa sebagai pembawa berita yang benar, Beritasatu.com tidak saja menyajikan berita dengan cepat, melainkan juga akurat. Untuk menyuguhkan berita yang akurat, kami menerapkan jurnalisme yang benar, yang selalu mengedepankan proses klarifikasi, check and recheck, dan uji silang, sebelum sebuah berita diterbitkan. Kami bekerja dengan profesionalisme tinggi karena kesadaran kami akan hak pembaca mendapatkan informasi yang benar. Juga menyadari peran media massa sebagai pembentuk opini publik, Beritasatu.com selalu menyampaikan aspek positif setiap peristiwa guna mencegah pesimisme pembaca. Setiap peristiwa duka dan kejadian yang menimbulkan kekecewaan selalu saja ada sisi positif sebagai pedoman menghadapi masa akan datang. Inilah yang disebut Jurnalisme Positif, sebuah jurnalisme yang tidak saja memperhatikan kaidah jurnalistik, melainkan juga dampak yang ditimbulkan oleh pemberitaan. Beritasatu.com adalah portal berita umum dengan fokus pada masalah politik, hukum, ekonomi, dan sosial. Lewat penerapan Jurnalisme Positif di setiap pemberitaan, kami berusaha “Menebarkan Optimisme Bangsa”. 3.3.2 Jakarta Globe Didirikan pada 2008 dan awalnya dalam bentuk surat kabar, Jakarta Globe saat ini adalah platform berita digital yang bertujuan untuk melayani penduduk Indonesia yang berbahasa Inggris. Visi Jakarta Globe adalah untuk memberi informasi, mempengaruhi, dan menginspirasi generasi muda berbahasa Inggris untuk membuat keputusan yang cerdas dan bijaksana. Jakarta Globe telah memberikan pembaca dengan pelaporan otoritatif di Indonesia. Seiring jurnalisme terus berkembang dan portal berita online mendapatkan pengaruh lebih dari media cetak dengan lebih banyak orang sekarang membaca berita secara online daripada di media cetak. Jakarta Globe menggeser fokusnya untuk memperbarui pembaca melalui situs webnya setelah menghentikan edisi cetak pada akhir 2015. Setelah diubah menjadi outlet berita digital saja, situs web kami hari ini menampilkan liputan berita terkini, serta jurnal foto dan video terbaik di Indonesia.



13



Kami menawarkan liputan berita yang mendalam, kisah bisnis yang informatif, dan fitur penuh warna tentang Indonesia dan wilayah yang lebih luas. Situs web kami, jakartaglobe.id, menawarkan buletin email harian, berita terkini sepanjang hari dan arsip berita yang dapat ditelusuri. 3.3.3 Globe Asia Globe Asia telah menjadi majalah bisnis utama Indonesia selama dekade terakhir. Diluncurkan pada 2007, Globe Asia, sebuah publikasi berbahasa Inggris, melayani komunitas bisnis yang berkembang pesat yang mencakup konglomerat mapan, eksekutif C-suite, wirausahawan muda, dan startup. Misinya adalah untuk memberikan jangkauan terdepan, mendalam tentang lingkungan bisnis Indonesia dan pemain bisnis terkemuka. 3.3.4 Suara Pembaruan Suara Pembaruan adalah salah satu koran sore berjalan tertua di negara ini. Koran ini dibangun untuk meninjau dan melaporkan peristiwa terkini dengan janji untuk mendukung kebenaran. Suara Pembaruan adalah pemimpin pasar dalam berita politik, nasional dan hukum, dan dibaca dengan baik oleh para pembuat keputusan di tingkat eksekutif, legislatif dan yudikatif di Indonesia.



3.4



Logo Berita Satu Media Holdings Pada gambar 1 ini merupakan logo dari perusahaan Berita Satu Media Holdings logo ini baru tercipta pada tahun 2011 setelah berganti nama dari Globe Media Group.



Gambar 1. Logo Berita Satu Media Holdings (Sumber : Wikipedia)



14



3.5



Struktur Organisasi Digital Team Pada gambar 2 ini merupakan struktur organisasi yang berada pada digital team dimana



penulis ditempatkan dalam kerja praktek ini.



Digital Team



IT SUPPORT



PROGRAMMER



WEB



MEDIA SOSIAL



MOBILE



Gambar 2. Struktur Organisasi Digital Team



15



BAB IV HASIL DAN PEMBAHASAN 4.1



Metode Pelaksanaan Kerja Praktek 4.1.1 Tempat Kerja Praktek Kegiatan kerja praktek ini dilakukan di bagian Digital Team sebagai Programmer di Gedung Berita Satu Plaza yang berada di jalan Gatot Subroto No.Kav. 35-36, RT.6/RW.3, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12950 4.1.2 Waktu Kerja Praktek Kerja praktek dilaksanakan mulai tanggal 06 Februari sampai dengan 05 April 2019



4.2



Analisis Sistem yang Sedang Berjalan Berita Satu Media Holding memerlukan website portal berita untuk membuat perancangan website yang baru perlu menganalisis dari sistem yang sudah ada seperti website portal berita Kompas.com, BeritaSatu.com, TribunNews.com. Dengan menanganalisis didapatkan apa saja sistem yang harus dibuat didalam CMS, Tampilan website yang menarik untuk para pembaca, bagaimana tampilan web responsive untuk perangkat mobile. Untuk masuk kedalam Content Management System yang ada harus memiliki akses terlebih dahulu seperti penulis atau editor. Content Management System yang berjalan di BeritaSatu.com yaitu artikel, kategori dan media. Artikel berfungsi untuk menulis artikel atau berita baru yang dikerjakan penulis atau editor. Lalu ada kategori, kategori ini yaitu memberikan kategori kepada setiap artikel atau berita yang telah dibuat seperti ekonomi, nasional, dunia dan lainnya. Media berfungsi untuk mengunggah gambar berita yang akan ditampilkan didalam web. Tampilan web portal berita di BeritaSatu.com tidak memiliki gambar berita dalam page terkini maupun terpopuler. Tidak tersusun dengan rapih penataan artikel yang ada tidak seperti kompetitor lainnya Kompas.com dan liputan6.com kedua web berita tersebut memiliki tampilan yang menarik dan tersusun dengan rapih sehingga nyaman untuk dilihat. Untuk itu fokus pada laporan ini yaitu pembuatan web portal berita dengan tampilan yang menarik dan responsive.



16



4.3



Rancangan Solusi Usulan Aplikasi Diperlukan web portal berita dengan User Interface yang menarik dan juga responsif. User



interface adalah suatu istilah yang dipakai untuk menggambarkan tampilan dari komputer yang berinteraksi langsung dengan pengguna. Dengan menggunakan teori dari Schalatter (2013) memberikan sebuah panduan untuk sebuah desain aplikasi yang mudah digunakan dengan membaginya ke dalam beberapa kompoen berpengaruh sebagai berikut : 



Consistency : konsistensi dari tampilan antarmuka pengguna







Hierarchy : penyusunan hirarki kepentingan dari obyek-obyek yang terdapat di dalam aplikasi







Personality : kesan pertama yang terlihat pada aplikasi yang menunjukkan ciri khas dari aplikasi tersebut.







Layout : tata letak dari elemen-elemen di dalam sebuah aplikasi.







Type : tipografi yang digunakan di dalam sebuah aplikasi







Color : penggunaan warna yang tepat digunakan pada sebuah aplikasi.







Imagery : penggunaan gambar, icon, dan sejenisnya untuk menyampaikan sebuah informasi di dalam aplikasi.







Control and Affordances : elemen dari antarmuka pengguna yang dapat digunakan orang untuk berinteraksi dengan sistem melalui sebuah layar.



17



4.3.1 Use Case Diagram Rancangan Usulan Web Portal Berita Berikut ini merupakan Use Case diagram dari rancangan usulan web portal berita yang akan dibuat.



Gambar 3. Use Case Diagram Rancangan Usulan



18



4.3.2 Use Case Description Usulan Web Portal Berita



Berikut ini merupakan table dari Use Case Deskripsi Use Case



Use Case Homepage



Actor



Pengunjung dan Author/Editor



Description



Pengunjung dan Author/Editor dapat melihat tampilan awal dari web portal berita ( Navigasi bar,Headline dan Postingan Berita)



Flow Activity



Actor



System



Mengakses web portal berita



Menampilkan tampilan homepage



Table 3 Use Case Deskripsi Homepage



Use Case



Use Case Kategori



Actor



Pengunjung dan Author/Editor



Description



Pengunjung dan Author/Editor dapat memilih kategori dari berita ( Navigasi bar dan Postingan Berita)



Flow Activity



Actor



System



Memilih Kategori Berita di



Menampilkan setiap kategori



dalam Navigasi bar



berita yang dipilih aktor



Table 4. Use Case Deskripsi Kategori



Use Case



Use Case Lihat Detail Berita



Actor



Pengunjung dan Author/Editor



Description



Pengunjung dan Author/Editor dapat membaca berita ( Navigasi bar dan Postingan Berita)



Flow Activity



Actor



System



Memilih Berita yang telah



Menampilkan



tersedia di web



berupa tulisan dan gambar



Table 5. Use Case Deskripsi Detail Post



19



detail



berita



Use Case



Use Case Search Post



Actor



Pengunjung dan Author/Editor



Description



Pengunjung dan Author/Editor dapat mencari berita yang dibutuhkan ( Navigasi bar dan Postingan Berita) Actor



Flow Activity



System



Mencari berita yang akan



Menampilkan hasil pencarian



dibaca



berita yang dipilih aktor



Table 6. Use Case Deskripsi Search Post



Use Case



Use Case Search Post



Actor



Pengunjung dan Author/Editor



Description



Pengunjung dan Author/Editor dapat mencari berita yang dibutuhkan ( Navigasi bar dan Postingan Berita) Actor



Flow Activity



System



Mencari berita yang akan



Menampilkan hasil pencarian



dibaca



berita yang dipilih aktor



Table 7. Use Case Deskripsi Search Post



Use Case



Use Case Akses halaman CMS



Actor



Author/Editor



Description



Author/Editor dapat mengakses tampilan cms



Flow Activity



Actor



System



Mengakses Content



Menampilkan



Management System



Management sistem



Table 8. Use Case deskripsi Akses Halaman CMS



20



Content



Use Case



Tambah Artikel



Actor



Author/Editor



Description



Author/Editor dapat menambahkan artikel berita di dalam CMS Actor



Flow Activity



System



Menambah, Edit, Hapus



Menampilkan Content



artikel berita



Management sistem untuk menambah, edit, hapus artikel berita



Table 9. Use Case Deskripsi Tambah Artikel



Use Case



Tambah Headline



Actor



Author/Editor



Description



Author/Editor dapat menambahkan headline untuk berita yang akan ditampilkan di homepage web Actor



Flow Activity



System



Menambah , edit, menghapus headline berita



Menampilkan Content Management sistem untuk menambah, edit, hapus headline berita



Table 10. Use Case Diagram Deskripsi Tambah Headline



Use Case



Tambah Media



Actor



Author/Editor



Description



Author/Editor dapat menambahkan gambar berita di dalam CMS



Flow Activity



Actor



System



Menambah, Edit, Hapus



Menampilkan Content



gambar untuk berita



Management sistem untuk menambah, edit, hapus gambar untuk berita



Table 11.Use Case Diagram Deskripsi Tambah Media



21



4.3.2 Activity Diagram User Interface Web Portal Berita Gambar berikut ini merupakan Activity Diagram rancangan usulan User Interface web portal berita.



Gambar 4. Activity Diagram Rancangan Usulan User Interface



22



4.4



Tampilan Web Portal Berita Gambar 5 merupakan tampilan awal yang muncul saat mengakses web portal berita. Pada



gambar diatas terdapat navigasi bar untuk kategori yang ada dalam web yang suadah dibuat untuk mengikuti arah pengunjung ketika menscroll halaman homepage dan bar search untuk pengunjung mencari berita yang diinginkan. Lalu ada dibawah navigasi bar terdapat bar breaking news yang berfungsi untuk berita berjalan. Lalu dibawah bar breaking news terdapat post headline yaitu untuk memperlihatkan berita pilihan untuk dijadikan berita utama.



Gambar 5. Tampilan Homepage



23



Gambar 6 merupakan tampilan lanjutan homepage, terdapat tampilan Nasional yaitu merupakan tampilan berita dari kategori nasional. Lalu dibawah tampilan Nasional terdapat tampilan terkini yaitu merupakan tampilan berita yang baru saja di upload oleh author atau editor yang telah di limit sehingga hanya menampilkan 5 postingan saja.



Gambar 6. Tampilan Homepage 2



24



Pada gambar 7, ketika user mengklik tombol lihat semua pada halaman homepage pengguna akan diarahkan menuju halaman Terkini. Halaman terkini menampilkan data lebih lengkap dari berita yang telah di upload oleh author atau editor yang sebelumnya yang ditampilkan hanya 5 berita saja di halaman homepage.



Gambar 7. Tampilan Index Lanjutan



25



Gambar 8 merupakan detail post dari berita yang telah di upload oleh author atau editor terdapat foto dari berita dan text dari berita. Lalu disamping dari detail post terdapat rekomendasi berita yang ditampilkan untuk pengunjung agar membaca berita lain dari web tersebut.



Gambar 8. Detail Post



26



Pada gambar 9 merupakan tampilan hasil dari pencarian berita yang ingin dibaca oleh pengunjung. Pencarian berdasarkan kata kunci yang telah di input oleh pengunjung.



Gambar 9. Search Page



27



Gambar 10 merupakan tampilan dari Content Management System (CMS). Pada page ini author atau editor dapat menambah, mengedit maupun menghapus berita. Didalam CMS ini terdapat artikel yang berfungsi untuk menambah, mengedit maupun menghapus berita lalu headline. Dalam fitur headline editor atau author dapat menentukan headlin berita yang akan ditampilkan lalu ada media. Media berfungsi untuk menambahkan gambar berita yang akan ditampilkan lalu kategori dan tags. Kategori dan tags berfungsi untuk mengkategorikan berita.



Gambar 10. CMS Page



28



BAB V KESIMPULAN DAN SARAN



5.1



Kesimpulan Membuat usulan user interface web portal berita untuk membuat web baru di berita satu media holdings. Dengan dilakukannya kerja praktek ini, penulis mengetahui bagaimana melakukan



pengembangan



pada



suatu



website



menggunakan



mockup



dan



mengimplementasikan langsung kedalam sistem. 5.2



Saran Saran yang dapat berikan penulis kepada yang ingin mengembangkan aplikasi ini yaitu pada homepage untuk bagian berita terpopuler belum sepenuhnya berjalan dan responsive yang bekerja belum sempurna dalam berbagai resolusi.



29



DAFTAR PUSTAKA A.S Rosa , dan M.Shalahuddin. 2014. Rekayasa Perangkat Lunak Struktur dan Berorientasi Objek. Bandung : Informatika. Betha Sidik, (2012). Menggunakan Framework CodeIgniter 2.x untuk Memudahkan Pengembangan Pemrograman Aplikasi WEB dengan PHP 5, Informatika Bandung, Bandung. Destiningrum, M., & Adrian, Q. J. (2017). Sistem Informasi Penjadwalan Dokter Berbassis Web Dengan Menggunakan Framework Codeigniter (Studi Kasus: Rumah Sakit Yukum Medical Centre). Jurnal Teknoinfo, 11(2), 30–37. Retrieved from https://ejurnal.teknokrat.ac.id Hasan Abdurahman dan Asep Ririh Riswaya. 2014. Aplikasi Pinjaman Pembayaran Secara Kredit Pada Bank Yudha Bhakti. Jurnal Computech & Bisnis, Vol. 8 No. 2 Joni Supriyono Arif Pramadya. (2013). Pembuatan aplikasi mobile berbasis Android OS untuk mengetahui lokasi tempat wisata di Daerah Istimewa Yogyakarta. MADCOM. (2016). Pemrograman PHP dan MySQL Untuk Pemula Yogyakarta: C.V Andi. Munawar. (2018). Analisis dan Perancangan Sistem Berorientasi Objek dengan UML. Informatika: Jakarta. O’Brien, J. A., & Marakas, G. M. (2010) Management Information System Ninth Edition. McGraw-Hill. New York. Raharjo, Heryanto, Rosdiana K. (2014). Modul Pemrograman WEB (HTML, PHP& MySQL), Modula, Bandung. Rauschenberger, Maria dkk.2013. Efficient Measurement of the User Experience of Interactive Products. International Journal of Artificial Intelligence and Interactive Multimedia, Vol. 2, No 1. Roth, R. E. 2017. User interface and User Experience (UI/UX) Design. The Geographi Information Science & Technology Body of Knowledge (2nd Quarter 2017 Edition), John P. Wilson (ed.). Ruli Erinton, R. M. N. (2017). Analisis Performasi Framework Codeigniter Dan Laravel Menggunakan Web Server Apache. EProceedings of Engineering, 4(3), 3565–3572. https://doi.org/10.1016/j.jcfm.2006.05.004 Sovia Elinawati, Abulwafa Muhammad, S. A. (2015). Perancangan Content Management System ( Cms ) Dengan Studi Kasus E-Bisnis Pada Toko Alya Gorden. Jurnal KomTekInfo Fakultas Ilmu Komputer, 2(1), 79–90. T. Schlatter and D. Levinson, Visual Usability: Principles and Practices for Designing Digital Applications. Elsevier, 2013.



30