PERANCANGAN WEB

MNC News(Website Portal Berita)

Disusun oleh:

Michael Julyus C. M.

J3C113038

INF 2B Praktikum 2

PROGRAM KEAHLIAN MANAJEMEN INFORMATIKADIREKTORAT PROGRAM DIPLOMA

INSTITUT PERTANIAN BOGORBOGOR

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

i

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

ii

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.

1

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

2

BAB II

ANALISIS DAN PERANCANGAN WEBSITE

2.1. Analisis dan Perancangan Website

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

CONTENT

MENU SAMPING

(POPULAR NEWS,

SUBSCRIBE,

ADVERTISEMENT)

FOOTER

3

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.

4

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.

5

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

6

Gambar 5 Halaman Politik

7

3.2.2. Implementasi Halaman Olahraga

Gambar 6 Halaman Olahraga

8

3.2.3. Implementasi Halaman Otomotif

Gambar 7 Halaman Otomotif

9

3.2.4. Implementasi Halaman Teknologi

Gambar 8 Halaman Teknologi

10

3.2.5. Implementasi Halaman Kesehatan

Gambar 9 Halaman Kesehatan

11

3.3. Implementasi Halaman About

Gambar 10 Halaman About

12

3.4. Implementasi Halaman Contact

Gambar 11 Halaman Contact

13

3.5. Implementasi Halaman Berita

Gambar 12 Halaman Berita

14

BAB IVPENUTUP

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.

15