PERANCANGAN WEB

MNC News
(Website Portal Berita)

Disusun oleh:
Michael Julyus C. M.
J3C113038
INF 2B Praktikum 2

PROGRAM KEAHLIAN MANAJEMEN INFORMATIKA

DIREKTORAT PROGRAM DIPLOMA
INSTITUT PERTANIAN BOGOR
BOGOR
2015

KATA PENGANTAR
Puji dan Syukur Penulis Panjatkan ke Hadirat Tuhan Yang Maha Esa karena berkat
limpahan Rahmat dan Karunia-Nya sehingga penulis dapat menyusun makalah ini tepat pada
waktunya. Makalah ini membahas mengenai Memori Internal.
Dalam penyusunan makalah ini, penulis banyak mendapat tantangan dan hambatan
akan tetapi dengan bantuan dari berbagai pihak tantangan itu bisa teratasi. Olehnya itu,
penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah
membantu dalam penyusunan makalah ini, semoga bantuannya mendapat balasan yang
setimpal dari Tuhan Yang Maha Esa.
Penulis menyadari bahwa makalah ini masih jauh dari kesempurnaan baik dari bentuk
penyusunan maupun materinya. Kritik konstruktif dari pembaca sangat penulis harapkan
untuk penyempurnaan makalah selanjutnya.
Akhir kata semoga makalah ini dapat memberikan manfaat kepada kita sekalian.

Bogor,

27

Mei

2015

Penulis

DAFTAR ISI
BAB I....................................................................................................................................................1
LATAR BELAKANG........................................................................................................................1
1.1.

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

1.2.

Tujuan................................................................................................................................1

1.3.

Ruang Lingkup Masalah....................................................................................................2

BAB II...................................................................................................................................................3
ANALISIS DAN PERANCANGAN WEBSITE...............................................................................3
2.1.

Analisis dan Perancangan Website.....................................................................................3

2.2.

Perancangan Antarmuka....................................................................................................3

2.3.

Perancangan Menu.............................................................................................................4

BAB III..................................................................................................................................................5
IMPLEMENTASI..............................................................................................................................5
3.1.

Implementasi Antarmuka (Halaman Utama)......................................................................5

3.2.

Implementasi Halaman News............................................................................................6

3.3.

Implementasi Halaman About..........................................................................................11

3.4.

Implementasi Halaman Contact.......................................................................................12

3.5.

Implementasi Halaman Berita..........................................................................................13

BAB IV...............................................................................................................................................14
PENUTUP.......................................................................................................................................14
4.1.

Simpulan..........................................................................................................................14

4.2.

Saran................................................................................................................................14

BAB I
LATAR BELAKANG

1.1.

Latar Belakang
Teknologi adalah sesuatu yang bermanfaat untuk mempermudah semua aspek

kehidupan manusia. Dunia informasi saat ini seakan tidak bisa terlepas dari teknologi.
Penggunaan teknologi oleh masyarakat menjadikan dunia teknologi semakin canggih.
Komunikasi yang dulunya memerlukan waktu yang lama dalam penyampaiannya, kini
dengan teknologi segalanya menjadi sangat cepat dan seakan tanpa jarak.
Internet merupakan media informasi yang sangat cepat dan efisien dalam penyebaran
informasi dan tidak lepas oleh jarak dan waktu, sehingga keberadaan media ini telah
membentuk suatu budaya masyarakat yang baru dan dikenal dengan dunia cyber. Untuk
mencari informasi di internet dapat dilakukan dengan mengunjungi situs (website) yang
berhubungan dengan informasi yang dibutuhkan atau dapat dilakukan dengan pencarian di
situs pencari (Search Engine Site).
Website merupakan salah satu aplikasi pada internet yang berupa informasi Hypertext,
dimana kita dapat membaca dan menelusuri informasi tersebut secara virtual tanpa terikat
pada media tertentu.
Dengan adanya internet suatu informasi berita kini semakin mudah didapatkan dan
memiliki manfaat bagi penggunannya untuk mendapatkan suatu berita yang up-to-date.
Berita online sangatlah fleksibel karena dapat diakses kapanpun dan dimanapun dengan
menggunakan perangkat berbasis komputer ataupun perangkat lainnya selama terhubung
dengan internet.
1.2.

Tujuan
MNC News adalah website portal berita yang mengandalkan kedalaman, kecepatan,

pertumbuhan dan perkembangan yang lebih cepat. Tujuan MNC News didirikan adalah untuk
upaya mencerdaskan bangsa melalui jurnalisme yang cerdas, tajam, berimbang, dan
menghibur.

Dengan didirikannya MNC News, masyarakat dapat mengakses informasi berita

dengan cepat dan efektif kapanpun dan dimanapun dengan menggunakan perangkat berbasis
komputer ataupun perangkat lainnya selama terhubung dengan internet.

1.3.

Ruang Lingkup Masalah

Ruang lingkup pada pembuatan website ini dibatasi hanya pada pembuatan halaman

utama website, halaman kategori berita, halaman berita, halaman informasi website dan
halaman kontak. Selain itu juga terdapat informasi tanggal & waktu serta menu pencarian
yang terdapat pada bagian header website. Sedangkan di bagian kanan website terdapat juga
menu subscribe (berlangganan).

BAB II
ANALISIS DAN PERANCANGAN WEBSITE

2.1.
2.1.1.

Analisis dan Perancangan Website

Analisis Masalah
Banyak masyarakat yang membutuhkan informasi berita secara cepat tetapi mereka

tidak bisa mendapatkannya karena dibatasi oleh masalah ruang dan waktu. Masalah tersebut
kiranya dapat teratasi dengan dibuatnya website portal berita ini yang dapat diakses kapanpun
dan dimanapun kita berada.
Berdasarkan percobaan yang dilakukan oleh penulis, perancangan dan pembuatan
website lebih sulit dilakukan jika hanya dibuat dengan menggunkana file HTML saja. Selain
itu, terdapat juga tampilan-tampilan yang tidak akan berfungsi secara optimal seperti
tampilan tanggal & waktu. Oleh karena itu, masalah tersebut dapat diatasi dengan membuat
file-file pendukung lainnya seperti file CSS, Javascript, dan XML.
2.1.2.

Analisis Kebutuhan
Dalam pembuatan website ini, dibutuhkan aplikasi teks editor seperti Notepad,

Notepad++, ataupun aplikasi sejenis lainnya. Selain itu, pembuatan website juga bisa
dilakukan dengan menggunakan aplikasi khusus perancangan website seperti Adobe
Dreamweaver.

2.2.

Perancangan Antarmuka
Antarmuka website portal berita ini dapat dilihat dari wireframe di bawah ini.
HEADER
MENU
MENU SAMPING
(POPULAR NEWS,

CONTENT

SUBSCRIBE,
ADVERTISEMENT)
FOOTER

Gambar 1 Gambaran Antarmuka Website

2.3.

Perancangan Menu
Menu utama dari website ini diletakkan di bawah header. Tujuannya yaitu untuk

memudahkan pengunjung dalam menemukan menu tersebut. Header diletakkan di sisi paling
atas website dikarenakan header tersebut memiliki makna yang sangat penting yaitu
menunujukkan identitas dari website tersebut yaitu website portal berita.

Gambar 2 Rancangan Menu

Website ini menggunakan struktur navigasi jejaring. Berikut merupakan gambaran

struktur navigasi tersebut.

Gambar 3 Struktur Navigasi Website

BAB III
IMPLEMENTASI

3.1.

Implementasi Antarmuka (Halaman Utama)

Berikut ini merupakan implementasi antarmuka dalam bentuk gambar screenshot dari
halaman utama website.

Gambar 4 Halaman Utama / Home

3.2.

Implementasi Halaman News

Halaman News dibagi menjadi 5 kategori yaitu politik, olahraga, otomotif, teknologi, dan
kesehatan.
3.2.1. Implementasi Halaman Politik

Gambar 5 Halaman Politik

3.2.2. Implementasi Halaman Olahraga

Gambar 6 Halaman Olahraga

3.2.3. Implementasi Halaman Otomotif

Gambar 7 Halaman Otomotif

3.2.4. Implementasi Halaman Teknologi

Gambar 8 Halaman Teknologi

3.2.5. Implementasi Halaman Kesehatan

Gambar 9 Halaman Kesehatan

10

3.3.

Implementasi Halaman About

Gambar 10 Halaman About

11

3.4.

Implementasi Halaman Contact

Gambar 11 Halaman Contact

12

3.5.

Implementasi Halaman Berita

Gambar 12 Halaman Berita

13

BAB IV
PENUTUP
4.1.

Simpulan
Website portal berita MNC News di buat dengan menggunakan HTML, CSS,

Javascript, dan XML agar dapat dibuat dengan semenarik mungkin. Website portal berita ini
berisi berita-berita yang referensinya diambil dari berbagai website portal berita online
lainnya yang di rangkum menjadi satu pada website portal berita MNC News.

4.2.

Saran
Beberapa saran yang ingin penulis sampaikan terkait dengan website portal berita MNC

News ini yaitu sebagai berikut :

1. Untuk dapat mengakses website ini dengan baik tanpa kendala, sebaiknya
menggunakan browser veri terbaru.
2. Sebaiknya perangkat komputer yang digunakan untuk mengakses website ini telah

ter-install aplikasi Adobe Flash Player versi terbaru agar fitur image slider (slide
show) yang berada pada halama utama website dapat berjalan dengan baik tanpa
kendala.

14