Anda di halaman 1dari 9

LAPORAN dan PROGRESS FINAL PROJECT

PEMROGRAMAN WEB STATIS

Disusun Oleh :
1. Yoga Pramudita (L200200182)
2. Muhammad Eko Ramayantyas S. (L200200137)
3. Rahmana Zahara Budi Putra (L200200132)

UNVERSITAS MUHAMMADIYAH SURAKARTA


TAHUN AJARAN 2020/2021
Pendahuluan

1. Latar Belakang

Seiring dengan berkembangnya teknologi informasi pada saat ini, maka dari itu
sudah banyak website yang menyediakan berbagai macam sumber informasi. Pada saat
ini berita-berita lebih mudah diakses melalui internet. Karena mudahnya akses berita
melalui internet, oleh karena itu kelompok kami akan membuat suatu website yang akan
membahas tentang berita. Salah satunya berita tentang E-Sports.

Halsman website kami akan membahas tentang berita E-Sports. Karena pada saat
ini banyak anak-anak maupun orang dewasa yang suka dengan E-Sports tetapi kurang
mnegerti tentang berita-berita di dalamnya. Maka dari itu kami berinisiatif untuk
membuat website berita yang diharapkan dapat meningkatkan minat membaca untuk
kalangan anak – anak maupun dewasa.

Berdasarkan latar belakang diatas maka kami mengambil judul untuk final project
yaitu “Mabarskuy ID : E-Sports News” yang berisikan berita-berita seputar dunia E-
Sports.

2. Tujuan

Project ini kami buat untuk memenuhii tugas mata kuliah Pemrograman Web Statis.

3. Manfaat
Manfaat yang diperoleh adalah :

1. Bagi Pembaca
Halaman website kami dapat dijadikan media informasi. Website kami menyediakan
berita-berita yang menarik seputar dunia E-Sports yang tentunya sangat menarik
untuk dibaca bagi anak-anak muda khususnya.

2. Bagi Pembuat
Hasil project ini akan menambah wawasan dan pengetahuan kami mengenai
pembuatan website, dan nantinya website kami ini akan kami kembangkan menjadi
website yang bermanfaat untuk semua orang.
Perancangan Web

1. Gambaran Umum Sistem


 Judul Project
Mabarskuy.com. Adalah sebuah web yang akan menampilkan berita-berita seputar
E-Sport di Indonesia.

 Deskripsi Sistem
Mabarskuy.com sebuah web yang akan memberitakan berita seputar E-Sport.
Tampilan Web kami buat se-simple mungkin dan seminimalis mungkin agar
pengunjung web tidak kesulitan dan merasa nyaman saat melihat tampilan Web
tersebut. Dan untuk warna background pada Web kami menggunakan warna ungu,
karena warna ungu merupakan warna yang elegan, tidak terlalu terang dan tidak
terlalu gelap agar penonton nyaman saat membaca berita di Web kami.

2. Rancangan Sturktur Menu


Pada Web kami terdapat 4 menu yaitu :
Detail Menu:
1. Home
Pada menu Home disini akan menampilkan tentang berita-berita terbaru seputar
E-sport di Indonesia seperti Mobile Legends, Fortnite, PUBGM, PES, dll.
Pengunjung website dapat membaca berita berita tersebut.
2. About US
Pada menu About Us kami akan menampilkan profil dan foto tentang anggota
kelompok kami.
3. Search
Pada menu Search pengunjung web dapat menggunakan menu tersebut untuk
mencari berita yang akan dibaca dengan mudah.
4. Highlights
Pada menu Highlights pengunjung Web dapat melihat video – video cuplikan
tentang E-sport. Video – video tersebut seperti cuplikan Turnamen MPL,
Turnamen PUBGM, Turnamen PES, dll.
 Mockup
Untuk pembuatan mockup atau desain awal kami buat menggunakan aplikasi Figma.
Agar nantinya dalam pembuatan website lebih mudah untuk diaplikasikan.
Berikut adalah rancangan mockup website kami.

Desain jadi :
Implementasi

1. Teknologi Implementasi

Implementasi system adalah tahap penerapan dan sekaligus pengujian bagi system
berdasarkan hasil Analisa dan perancangan yang telah kami lakukan. Pada hal ini
merupakan implementasi hasil rancangan menjadi sebuah halaman web dengan
menggunakan HTML & CSS.

2. Screenshot Halaman
 Landing Page

Ini adalah bagian landing page yang berisi dengan beberapa content, video highlights, dan
image slider.
 Content

Ini adalah bagian content yang berisi dengan berita-berita terbaru seputar dunia E-Sports.
 About Us

Ini adalah bagian dari halaman About Us yang berisi dengan profil anggota kelompok kami.
Pada halaman ini juga terdapat icon untuk menuju social media kita.
Referensi

https://www.petanikode.com/html-project/
https://www.esports.id/
https://kelasprogrammer.com/cara-membuat-website-dengan-html-dan-css/