PERANCANGAN PORTAL BERITA BEBASIS WEB MOBILE

(STUDI KASUS DI PROGRAM STUDI PTIK FKIP UNIVERSITAS BUNG HATTA)

Zulhadisman1, Arnita2, Eril Syahmaidi1

1
Jurusan Pendidikan Teknik Informatika dan Komputer
Fakultas Keguruan dan Ilmu Pendidikan
2
Jurusan Teknik Elektro
Fakultas Teknologi Industri
Universitas Bung Hatta
E-mail : zulhadisman.ubh.ptik@gmail.com

Abstract
The development of information and communication technologies is rapidly increasing human
demands to work more quickly, accurately and efficiently one of them on mobile devices (cell
phones). The process of delivering information relating to the activities and planning of
upcoming events at the Department PTIK Bung Hatta University that uses notification letter
and still use social networking aided deliver. Therefore the concomitant rise in mobile devices
demanding requirements for the need for a mobile web-based news portal to be able to allow
users to submit and access via computer or on a mobile device. Is also expected to improve
the quality of services in the field of delivery of information to faculty, students and alumni for
the better. Mobile web-based news portals in this thesis using bootstrap framework to adjust
the display on mobile devices and for data storage use while MySQL database programming
language on the server side using PHP. Information system access mobile web-based news
portal on mobile devices at the end of this task using an application that runs on the Android
operating system from version 4.1 to 5.0 were created using the IDE android studio.

Keywords : News portal , Mobile Web , Bootstrap , Android Applications

PENDAHULUAN maupun alumni yang menggunakan

Latar Belakang perangkat mobile tapi belum dimanfaatkan
Seiring dengan menyonsong era secara maksimal didalam menerima
globalisasi, maka penyampaian informasi informasi.
berita juga dapat dilakukan melalui sebuah Oleh karena itu pada tugas akhir
aplikasi mobile yang mana nantinya “Perancangan Portal Berita Berbasis
informasi berita tersebut berbasis web Web Mobile Studi Kasus Program Studi
mobile dan selalu sesuai pada tampilan Pendidikan Teknik Informatika dan
layar apapun pada mobile device Komputer FKIP Universitas Bung
(Responsive). Hatta” akan dibahas mengenai rancangan
Berdasarkan observasi yang dilihat portal berita untuk perangkat mobile yang
dilingkungan program studi PTIK belum nantinya menghasilkan sebuah aplikasi
adanya sebuah portal berita untuk jurusan portal berita berbasis web mobile untuk
dan juga beberapa dosen, mahasiswa mempermudah dalam penyampaian berita,
pengumuman dan agenda yang bermanfaat Gambar 1 Metode Pengembangan Sistem
untuk dosen, mahasiswa maupun alumni. Dengan Waterfall (Rossa, dkk, 2013::28)
METODE PENELITIAN Beberapa tahapan metode waterfall
Dalam suatu pengembangan akan dijelaskan sesuai yang dilakukan
perancangan sistem ini perlu adanya dalam pembuatan aplikasi pada Tugas
metode yang digunakan untuk pedoman akhir ini :
dalam pengerjaannya, dengan mengikuti 1. Analisis Kebutuhan
metode tersebut maka perancangan sistem Proses pengumpulan kebutuhan
ini bisa mencapai suatu tujuan yang baik dilakukan secara intensif untuk
seperti penulis harapkan. mespesifikasikan kebutuhan perangkat
Metode yang penulis gunakan lunak agar dapat dipahami perangkat lunak
dalam perancangan sistem ini adalah seperti apa yang dibutuhkan oleh user.
metode air terjun (the waterfull model). Spesifikasi kebutuhan perangkat lunak
The waterfall model adalah metode yang tahap ini perlu untuk
pengembangan aplikasi dengan pendekatan didokumentasikan.
sekuensial. Model air terjun (Rosa, dkk: 2. Desain
28, 2013) sering juga disebut model Desain perangkat lunak adalah
sekuensial (sequential linear) atau alur proses multi langkah yang fokus pada
hidup klasik (classic life cycle). Model air desain pembuatan program perangkat
terjun menyediakan pendekatan alur hidup lunak termasuk struktur data, arsitektur
perangkat lunak secara sekuensial atau perankat lunak, representasi antarmuka dan
terurut dimulai dari analisis, desain, prosedur pengkodean. Tahap ini
pengkodean pengujian dan tahap mentranslasi kebutuhan perangkat lunak
pendukung (support). Pendekatan model dari tahap analisis kebutuhan ke presentasi
ini mengalir menurun seperti air terjun desain agar dapat diimplementasikan
(waterfall) yang dikembangakan oleh menjadi program pad tahap selanjutnya.
Pressman melalui beberapa tahap. Tahapan Desain perangkat lunak yang dihasilkan
dapat dilakukan pada gambar berikut: pada tahap ini juga perlu
didokumentasikan.
3. Pembuatan Kode Program
Desain harus ditranslasikan ke
dalam program perangkat lunak. Hasil dari
tahap ini adalah program komputer sesuai
dengan desain yang telah dibuat pada tahap Hardware - hardware yang
desain digunakan untuk menjalankan program
4. Pengujian aplikasi yang telah dibuat adalah satu unit
Pengujian fokus pada perangkat komputer yang lengkap dengan CPU,
lunak secara fungsional dan memastikan harddisk sebagai media penyimpanan data
bahwa semua bagian sudah diuji. Hal ini yang akan diinstalkan pada komputer
dilakukan untuk meninimalisirkan lengkap dengan sebuah sistem operasi dan
kesalahan (error) dan memastikan program pendukung hasil perancangan
keluaran yang dihasilkan sesuai dengan portal berita , memori dengan ukuran
yang diinginkan. minimal 64 MB, serta sebuah perangkat
5. Pendukung atau Pemeliharaan mobile berbasis android agar dapat
Tidak menutup kemungkinan memasukan aplikasi dan mengakses dalam
sebuah perangkat lunak mengalami bentuk mobile sistem portal berita PTIK
perubahan ketika sebuah dikirimkan ke FKIP.
user. Perubahan bisa terjadi karena adanya 2. Perangkat Lunak (Software)
kesalahan yang muncul dan tidak Untuk menjalankan program
terdeteksi saat pengujian atau perangkat aplikasi yang dirancang harus
lunak harus diadaptasikan dengan menggunakan beberapa software
lingkungan baru. Tahap ini pendukung pendukung. Software pendukung yang
atau pemeliharaan dapat mengulangi harus diinstalkan adalah software Browser
proses pengembangan mulai dari analisis yang berfungsi untuk menampilkan hasiil
spesifikasi untuk membuat perangkat lunak rancangan berita dalam bentuk Web
baru. Desktop. Selain itu pada perangkat mobile
IMPELEMENTASI DAN PENGUJIAN berbasiskan android dengan
SISTEM menginstallkan aplikasi PortalBerita.Apk
Implementasi Sistem pada perangkat tersebut mengakses
Agar dapat mengimplementasikan lansung portal berita PTIK FKP.
program aplikasi dengan baik, maka 3. Manusia (Brainware)
diperlukan tiga buah komponen yaitu: Brainware merupakan operator
hardware, software, dan brainware. Untuk yang berfungsi untuk mengakakses dan
lebih jelas dapat dijelaskan fungsi dari mengelola portal berita. Pengguna portal
masing-masing komponen sebagai berikut berita ini adalah seluruh Dosen,
: Mahasiswa , Alumni, atau pun orang yang
1. Perangkat Keras (Hardware) mengakses portal berita PTIK FKIP. Jadi
ketiga komponen di atas saling terkait 2. Tampilan Startup
karena software merupakan komponen Tampilan ini akan selalu
abstrak dari susunan sistem komputer dan ditampilkan saat portal berita pada
hardware akan hidup dan memiliki fungsi perangkat mobile android mulai dijalankan
jika digunakan bersama-sama dengan
software sedangkan brainware adalah
orang yang akan mengoperasikan program
aplikasi, tanpa brainware komputer tidak
akan bisa beroperasi.
Pengujian Program

Pengujian program dilakukan

dengan mengeksekusi program aplikasi
yang telah dibuat dan menampilkannya Gambar 3. Tampilan Startup
berdasarkan menu-menu yang ada pada 3. Tampilan Halaman Utama
portal berita. Pengunjung
Adapun bentuk-bentuk program Tampilan halamn utama digunakan
sebagai berikut : sebagai tampilan awal untuk pengunjung
1. Tampilan Icon portal berita berbasis web mobile pada
Tampilan icon portal berita PTIK perangkat bergerak. Pada tampilan utama
FKIP yang telah diinstall diperangkat pengunjung ini diberikan fasilitas untuk
mobile android melalui Android Virtual memilih informasi apa saja yang ingin
Device (AVD). dilihat pada portal ini.

Gambar 3. Tampilan Halaman Utama

Gambar 2. Tampilan Icon Pengunjung
 4. Tampilan Form Login Pengguna
Form login dilakukan untuk
pengguna manajemen berita yang
berfungsi sebagai fasilitas untuk masuk ke
sistem portal berita yang ada di sistem
dengan nama pengguna dan kata sandi
yang telah divalidasi.

Gambar 5. Tampilan Halaman Pengguna

6. Tampilan Form Menu Pengguna
Berfungsi Sebagai fasilitas untuk
mengelola data yang ada di sistem portal
Gambar 4. Tampilan Form Login berita, dengan field Menu Pengguna antara
Pengguna lain manajemen modul, Berita, Kategori,

5. Tampilan Halaman Pengguna Tag (Label), Komentar, Hubungi Kami,

Halaman Utama Pengguna Sistem Agenda, Template, Kata Jelek, Indentitas
berfungsi Sebagai fasilitas untuk Website.
menampilkan informasi umum untuk
pengguna sistem dengan Informasi berita
yang sudah ditulis, agenda, kontak, total
pengunjung, komentar terakhir dan
aktifitas pengguna lain pada sistem ini.
Menampilkan komentar dan aktifitas
pengguna, aksi untuk menyegarkan
halaman komentar dan pengguna.

Gambar 6. Tampilan Form Menu

Pengguna
 7. Tampilan Form Manajemen
Berita
Berfungsi Sebagai fasilitas untuk
mengelola data berita yang ada di sistem,
dengan cara menambah, mengedit dan
menghapus berita yang ada pada sistem.
Gambar 7. Tampilan Form Manajemen
Berita
8. Tampilan Form Tambah Berita
Fungsi Sebagai fasilitas untuk
memasukan data berita ke sistem, dengan
memasukan judul, isi berita, memasukan
gambar, memilih tag dan ketegori berita
yang akan di masukan.
Gambar 8. Tampilan Form Tambah Berita
9. Tampilan Form Manajemen
Kategori
Berungsi Sebagai fasilitas untuk
mengelola data kategori yang ada di
sistem, dengan cara menambah, mengedit,
aktif dan non aktifkan kategori berita.
Gambar 9. Tampilan Form Manajemen
Kategori
10. Tampilan Form Manajemen
Agenda
Berungsi sebagai fasilitas untuk
mengelola data agenda yang ada di sistem,
dengan cara menambah, mengedit dan
menghapus agenda.
Gambar 10. Tampilan Form Manajemen
Agenda
Pemeliharaan Sistem Ucapan Terima Kasih
Pemeliharaan dilakukan untuk Pada kesempatan ini, penulis
perangkat sistem ataupun sistem itu mengucapkan terima kasih banyak kepada
sendiri. Hal ini bertujuan agar sistem dapat berbagai pihak yang telah membantu dan
berjalan dengan baik. Pemeliharaan sistem membimbing penulis selama menulis
sendiri dimulai dari perangkat keras laporan skripsi ini, yakni kepada :
dimana sistem dijalankan dan dikontrol. 1. Ibu Ir.Arnita, M.T selaku
Pemeliharaan perangkat sistem dapat pembimbing I dalam penyusunan
dilakukan secara berkala dan teratur. Tugas Akhir yang telah banyak
Sedangkan pemeliharaan sistem itu sendiri memberikan bimbingan dan saran
dimaksudkan agar masalah - masalah yang yang sangat bearti bagi penulis,
terjadi pada saat sistem berjalan dapat sehingga akhirnya dapat
terdeteksi. Pemeliharaan sistem dapat menyelesaikan Tugas Akhir ini
dilakukan dengan cara mem-backup dengan sebaik – baiknya.
seluruh data pada waktu yang telah 2. Bapak Eril Syahmaidi, S.pd., M.pd
ditentukan atau secara berkala. pembimbing II dalam penyusunan
Kesimpulan Tugas Akhir yang telah banyak
Berdasarkan uraian pada bab – bab memberikan bimbingan dan saran
sebelumnya, maka dapat disimpulkan yang sangat bearti bagi penulis,
bahwa hasil perancangan portal berita yang sehingga akhirnya dapat
ditujukan pada dosen, mahasiswa dan menyelesaikan Tugas Akhir ini
alumni jurusan PTIK FKIP Universitas dengan sebaik – baiknya.
Bung Hatta pada dasarnya adalah berbasis 3. Bapak Drs. Khairul Harha, M.Sc
web yang nantinya di akses melalui sebuah selaku Dekan Fakultas Keguruan
aplikasi yang diintallkan pada perangkat dan Ilmu Pendidikan.
bersistem operasi android versi 4.1 sampai 4. Bapak Drs. Khairudin, M.Si, selaku
5.0. Portal berita ini nantinya akan Ketua Jurusan Pendidikan Teknik
menyesuaikan ukuran tampilan layar pada Informatika dan Komputer
perangkat mobile. Sehingga dengan adanya Universitas Bung Hatta.
portal berita bebasis web mobile dapat 5. Bapak Ashabul Khairi, S.T.,
memberikan informasi yang terbaru untuk M.Kom. selaku dosen pembimbing
memenuhi setiap kebutuhan dosen, akademik yang telah banyak
mahasiswa dan alumni akan berita terbaru. membantu penulis dalam menjalani
perkuliahan di kampus.
 6. Bapak / Ibu Dosen Program Studi landasan-teori-2.html. Di akses pada 18
Pendidikan Teknik Informatika Maret 2015.
Dan Komputer Fakultas Keguruan
Massenner, de Paul, Charnley, Neal,M.
dan Ilmu Pendidikan Universitas
James, Assegaf,Charnley,V Mitchel.
Bung Hatta.
Pengertian Berita. Dikutip dari
7. Teristimewa kepada kedua Orang
http://www.ejurnal.com/2013/12/pengert
Tua penulis yang tercinta
ian-berita-menurut-para-ahli.html. Di
Ayahanda (Bpk. Alimin), Ibunda
Akses pada 21 Mei 2015.
(Ibu Desimar) dan Kakak tersayang
(Almardi), (Hendra Mulia) yang M.J Alexander, HM Jogianto. Pengertian

telah banyak memberikan Sistem. Dikutip dari https://theresiavera.

dukungan , motivasi yang tak wordpress.com/2008/04/04/bab-ii-

terhingga dan tak ternilai harganya landasan-teori-2.html. Di akses pada 18

yang dirasakan oleh penulis. Maret 2015.

8. Seluruh teman – teman Program McLeod, Raymond, George Schell. 2004.

Studi Pendidikan Teknik Sistem Informasi Manajemen.
Informatika dan Komputer yang PT.Indeks, Jakarta.
selalu bersama dalam suka dan
duka yang tidak dapat di sebutkan Pengertian Android Studio

satu per satu. https://www.academia.edu/9990291/

Daftar Pustaka Modul_Programming_Android_dengan

Hakim, Zainal. Pengertian Web Portal. _Android_Studio_-_I. Di akses pada 21

Dikutip dari http://www. Zainalhakim Maret 2015.

.web.id/pengertian-web-portal.html. Di Pengertian Apa Itu Bootstrap. Di kutip di

akses pada 13 Maret 2015. http://dul.web.id/bootstrap/3/tuts-tips/

Husni , Kusnassriyanto.1997. Pengantar belajar-bootstrap-untuk-pemula.php. Di

Perancangan Sistem. Erlangga: Jakarta Akses pada 21 Mei 2015.

Prasetio, Adhi. 2012. Buku Pintar

Kadir, Abdul. 2013. Pemograman Aplikasi
Pemograman Web. Mediakita: Jakarta
Android. CV.Andi Offset, Yogyakarta.
Selatan.
Laudon. Pengertian Sistem Informasi.
Riyanto. Pengertian XAMPP. Dikutip dari
Dikutip dari https://theresiavera.
http://library.binus.ac.id/eColls/eThesis
wordpress.com/2008/04/04/bab-ii-
doc/Bab2/2012-1-00074-
 SI%20Bab2001.pdf . Di akses pada 18
Maret 2015.
Sakur B. Stedy. 2005. Aplikasi Web
Database dengan Dreamweaver MX
2004. Andi Offset. Yogyakarta.

Simarmata, janner., Iman Paryudi. 2006.

Basis Data. Yokyakarta: ANDI.

Shalahuddin, Rosa dan M. Shalahhuddin.

2013. Rekayasa Perangkat Lunak.
Informatika Bandung. Bandung