Tugas Proyek Desain Web

Disusun Oleh :
Loli (TI – B Sore 19/20)
Jinchuuriki : Silvia Natalia (191110040)

Bijuu : Hernando Tandra (191110341)

Dosen :
Albert Prima Laia, S.Kom, FCNS

Program Studi Teknik Informatika

STMIK – STIE Mikroskil Medan

2020
 KATA PENGANTAR

Puji syukur kami panjatkan kepada Tuhan Yang Maha Esa, karena dengan
rahmat dan karunia-Nya, kami dapat menyelesaikan tugas dokumen proyek desain
web ini.

Tidak lupa kami mengucapkan terima kasih kepada Bapak Albert Prima Laia,
S.Kom, FCNS yang telah mengajar dan membimbing kami selama satu semester ini
mengenai bidang studi Design Web.

Pembuatan tugas laporan ini bertujuan untuk merangkum setiap kegiatan

dalam pengerjaan tugas proyek, penjelasan lengkap tugas proyek, fitur-fitur yang kami
suguhkan dalam tugas proyek beserta penjelasannya dan biodata diri kami.

Dalam penyusunan tugas laporan ini, kami menyadari sepenuhnya bahwa

tugas laporan ini masih jauh dari kesempurnaan karena pengalaman dan
pengetahuan kami yang terbatas. Semoga tugas laporan ini dapat mencakup dan
memenuhi persyaratan dan keinginan yang Bapak harapkan.

Medan, Juni 2020

Silvia Natalia

ii
 DAFTAR ISI

KATA PENGANTAR ............................................................................................................................ ii

DAFTAR ISI .......................................................................................................................................... iii
Biodata 1 .............................................................................................................................................. iv
Biodata 2 ............................................................................................................................................... v
ASSESSMENT ......................................................................................................................................1
PROYEK ................................................................................................................................................2
1. Login dan SignUp Page ( 3 Page ) ........................................................................................2
2. Home Page ( 2 Page )..............................................................................................................2
3. Direct Message ( 1 Page ) .......................................................................................................3
4. Explore Page ( 1 Page )...........................................................................................................3
5. Notification Page ( 1 Page ) ....................................................................................................3
6. Profile User Page ( 2 Page ) ...................................................................................................3
7. Profile Friend Page ( 24 Page ) ..............................................................................................4
DEFINITIF ..............................................................................................................................................5
PENJELASAN TEKNIS.....................................................................................................................10
FITUR-FITUR UTAMA .......................................................................................................................30
HASIL DAN KESIMPULAN ..............................................................................................................42
KATA PENUTUP ................................................................................................................................43
REFERENSI ........................................................................................................................................44

iii
 Biodata 1

Nama : Silvia Natalia

Jenis Kelamin : Perempuan

Tempat Lahir : Medan

Tanggal Lahir : 19 Agustus 2001

Tinggi Badan : 161 cm (5 ft 3.4 in)

Berat Badan : 51 kg (112 lbs)

Asal Sekolah : SMA Swasta Methodist-2 Medan

Makes : Pasta, Strawberry foods (cakes, ice cream, desserts, etc)

Mikes : Cappuccino, Strawberry drinks

Pekerjaan : - Ayah : Wiraswasta

: - Ibu : Ibu Rumah Tangga

Cita – cita :Dancer / music-related job

Hobby : sing, dance, listening to music

Quotes :“Hard work betrays none”

Alasan Hidup : Live my life to the fullest

Tokoh Inspirasi :-

Ttd

Silvia Natalia

iv
 Biodata 2

Nama : Hernando Tandra

Jenis Kelamin : Laki-laki

Tempat Lahir : Medan

Tanggal Lahir : 2 Juni 2001

Tinggi Badan : 172 cm

Berat Badan : 53 kg

Asal Sekolah : SMAS Sutomo 2 Medan

Makes : Masakan Ibu

Mikes : Air Putih

Pekerjaan : - Ayah : Wiraswasta

: - Ibu : Karyawan Swasta

Cita – cita : Hidup Bahagia

Hobby : Rebahan

Quotes : “Hard Work Pay Off !”

Alasan Hidup : Tidak perlu alasan, seperti halnya CINTA

Tokoh Inspirasi : Kiyotaka Ayanokōji

Ttd

Hernando Tandra

v
 ASSESSMENT

Karena kelompok ini hanya beranggotakan dua orang, maka persentase dari
proyek ini kami bagi rata dengan persetujuan dari kedua belah pihak dan dinyatakan
sudah adil.

Didalam sosial media terdapat berbagai macam hal yang penerapannya dapat
digunakan berulang-ulang pada setiap halaman, jadi kami tidak bisa menuliskan
pembagiannya secara detail tentang apa yang dilakukan tiap individu. Contohnya
seperti bagian atas yang terdapat menu-menu atau navigasi untuk ke page lainnya,
yang digunakan dalam hampir semua page.

Oleh karena itu, hampir di setiap page terdapat pengerjaan dari kedua belah
pihak dan kami akan berdiskusi untuk membuat page tersebut.

Salah satu media pembantu yang kita gunakan untuk membantu kami dalam
membuat sebuah page secara bersamaan yaitu Discord yang kami gunakan untuk
sharing screen secara live dan dapat berkomunikasi secara langsung.

Pembagian secara kasarnya dapat dilaporkan sebagai berikut :

- Silvia Natalia : bagian design dan membuat isi dari content-content
- Hernando Tandra : bagian ide-ide dalam fitur yang akan dibuat

Menurut kami, dengan bekerja seperti ini dapat membantu kedua belah pihak
untuk mengerti terhadap proyek yang dikerjakan karena pada tiap page dibuat secara
bersamaan dan dapat bertanya jika ada yang tidak dimengerti. Daripada membaginya
dan dibuat secara perorangan, dan pada akhirnya hanya menyatukan page-page
yang telah dibuat tiap individu. Alhasil yang terjadi adalah mereka hanya akan
mencoba memahami page yang dibuatnya dan kurang mengerti tentang apa yang
dibuat oleh anggota lainnya.

1
 PROYEK

Dalam tugas proyek ini, kami membuat sebuah sosial media yang menyerupai
Instagram. Tentunya dengan keterbatasan kemampuan kami, kami hanya mengikuti
dari segi design dan fitur secara sederhana. Didalam proyek yang kami buat, kami
menambahkan sebuah fitur untuk membagikan sebuah teks yang bisa berupa seperti
‘kutipan’ atau teks tanpa makna apapun.

Didalam tugas proyek kami, kami membuat sekitar page yang perinciannya
sebagai berikut :

1. Login dan SignUp Page ( 3 Page )

Login Page yang terdiri dari satu halaman, digunakan untuk memasukkan akun
apa yang akan digunakan, tetapi ini hanya sebuah tampilan saja. Yang artinya
input-an apapun itu dapat kita gunakan untuk login.
SignUp Page yang terdiri dari 2 halaman; halaman pertama digunakan untuk
membuat akun jika tidak mempunyai akun (sama halnya dengan Login Page yang
memungkinkan input-an apapun itu), halaman kedua digunakan untuk
memberitahukan jika akun yang kita buat telah berhasil dibuat dan akan mebawa
kita masuk ke bagian Home Page.

2. Home Page ( 2 Page )

Home Page, terdiri dari bagian:
- ‘Post’ yang berisi foto-foto dari Friends kita yang diposting olehnya dan diurutkan
dari yang terbaru. Dibagian ini juga kita dapat memberikan comment terhadap foto
yang di-post, dan memberikan like. Keterbatasan kemampuan membuat tombol
‘share’ hanya menjadi sebuah tampilan.
- ‘Quotes’ yang berisi tulisan-tulisan dari Friends kita. Fitur ini seperti bagian ‘tweets’
dalam Twitter. Bisa saja ini berisi kutipan hatinya, atau hanya sebuah keisengan
dari Friends kita. Bagian ini juga sama seperti ‘Post’ yang memiliki tombol ‘like’ dan
‘share’. Tetapi tombol ‘share’ disini juga hanya sebagai sebuah tampilan tanpa
memiliki kegunaan apapun.

2
3. Direct Message ( 1 Page )
Pada bagian ini, kami membuat sebuah page yang berisi percakapan antara kita
dengan orang lain. Percakapan disini hanya merupakan sebuah tampilan atau
hardcode yang tidak dapat ditambah. Tersedia juga tempat untuk menuliskan
pesan yang ingin dikirim, tetapi tidak dapat digunakan karena ini hanya merupakan
sebuah tampilan fake-chat.

4. Explore Page ( 1 Page )

Kegunaan Explore Page hampir sama dengan Home Page, sama-sama
menampilkan postingan dari orang lain. Bedanya, Explore Page menampilkan
postingan dari orang yang bukan merupakan Friends dari kita, sedangkan Home
Page menampilkan postingan dari Friends kita. Tampilan pada Explore Page juga
sedikit berbeda, hanya menampilkan gambarnya dan disusun tiga buah panjang
ke samping. Jika gambarnya kita klik, akan menghasilkan sebuah pop-up yang
berisi postingan (gambar, caption, dan comment-comment) dari orang tersebut.
Explore Page disini juga hanya berisi bagian dari 'Post' dan tidak untuk bagian
'Quotes'.

5. Notification Page ( 1 Page )

Notification Page merupakan page yang berisi pesan kegiatan jika ada sesuatu
yang berhubungan dengan kita terjadi. Contohnya seperti jika ada yang menerima
permohonan pertemanan kita atau ada yang ingin menjadi Friends kita, ada yang
meng-like postingan kita, dan lain sebagainya.

6. Profile User Page ( 2 Page )

Profile User Page merupakan page dimana terlampir profile dari si pengguna yang
berisi profile picture dari si pengguna, nama, dan berapa banyak 'Post' dan
'Quotes' yang telah di posting beserta 'Friends' yang jika di klik akan menampilkan
list dari Friends pengguna. Terbagi menjadi dua page; pertama bagian 'Post' yang
menampilkan foto-foto postingan dari si pengguna dan disusun seperti bagian

3
 explore dengan tiga buah gambar ke samping, kedua bagian 'Quotes' yang
menampilkan cuitan-cuitan dari si pengguna. Pada awal masuk Profile User Page,
akan dibawa ke bagian 'Post'.

7. Profile Friend Page ( 24 Page )

Pada Profile Friend Page, hampir sama dengan Profile User Page, bedanya hanya
ditambahkan sebuah tombol 'add friend'. Disini kita membuat sebanyak 12 Friends
yang bisa dikunjungi Page nya, jadi total dari bagian ini menjadi 12 X 2 = 24 page.
Selain tombol 'add friend' selebihnya sama dengan bagian Profile User Page.

4
 DEFINITIF

Pada era global ini, orang-orang tidak akan luput dari yang namanya media
sosial. Media sosial merupakan sebuah media online, yang memungkinkan seorang
individu berbagi dan bertukar informasi dengan individu atau kelompok yang lainnya.
Media sosial sebagai “sebuah kelompok aplikasi berbasis internet yang membangun
di atas dasar ideologi dan teknologi Web 2.0, dan yang memungkinkan penciptaan
dan pertukaran user-generated content” (Kaplan & Haenlein, 2010).Beberapa contoh
media sosial yang sedang berkembang saat ini yaitu Instragam, Twitter, Line,
Facebook, WhatsApp, Youtube, dan lain-lain. Hal tersebut membuktikan bahwa media
sosial dibutuhkan oleh pengguna smartphone di era global ini.

Perkembangan dunia teknologi yang sudah semakin inovatif di era global telah
memberikan dampak langsung kepada masyarakat terutama bagi generasi muda.
Media sosial dapat diakses dengan mudah melalui smartphone kapan saja dan
dimana saja oleh pemiliknya. Terlebih lagi bagi masyarakat, smartphone sekarang
menjadi barang yang wajib dimiliki tiap individu. Tidak lupa juga pasangan wajib dari
sebuah smartphone, yaitu internet.

Seseorang pasti memiliki berbagai motivasi dalam menggunakan media sosial.

Sekedar untuk berkomunikasi dengan orang lain, untuk mencari tahu perkembangan
sesuatu, untuk berbagi informasi maupun untuk mengikuti salah satu yang menjadi
trend saat ini yaitu menggunakan media sosial sebagai bentuk eksistensi diri. Orang-
orang yang hanya ingin menggunakan media sosial sebagai sarana menjaga
silaturahmi biasanya akan memilih media sosial yang bersifat private saja seperti Line,
Whatsapp, Blackberry Messenger yang sempat booming pada masanya, atau yang
lainnya. Meskipun masuk ke media yang terbuka seperti Facebook dan Twitter maka
mereka hanya akan menjadi penonton dan pembaca yang baik dan melihat
perkembangan terbaru yang ada di media sosial.

Sedangkan bagi orang-orang yang ingin diakui eksistensinya oleh masyarakat

luas melalui media sosial biasanya akan menggunakan media sosial yang bersifat
terbuka seperti Instagram, Facebook, atau Twitter. Karena disinilah tempat kita bisa
secara bebas dan terbuka dalam berinteraksi. Sehingga banyaknya update status

5
serta postingan yang kita miliki adalah salah satu bentuk jika kita ingin dikenal secara
luas. Kita dikenal sebagai apa dan siapa itu kita yang memutuskan, karena apa yang
kita posting melalui media sosial akan menjadi gambaran diri kita bagaimana kita
memposisikan diri dimata masyarakat luas.

Jadi latar belakang pengerjaan kami memilih membuat proyek bertema sosial
media adalah karena menurut kami media sosial pada saat ini sangat berpengaruh
pada kehidupan seseorang, apalagi masyarakat sekarang tidak akan luput dari
smartphone dan internet. Jika seseorang memiliki smartphone tetapi tidak memiliki
internet, lebih baik orang itu membeli telepon genggam tanpa internet yang jauh lebih
murah bukan? Dan apa yang dilakukan orang dengan smartphone-nya? Tentu saja
kebanyakan orang menghabiskan waktunya bersama smartphone-nya untuk bermain
sosial media dan ada juga yang untuk bermain game.

Alasan lain kami memilih sosial media bertema Instagram adalah karena
menurut kami sosial media Instagram itu bisa seperti gabungan-gabungan dari sosial
media yang lain atau sosial media terlengkap. Contohnya saja, pada Instagram bisa
kita temukan berbagai macam informasi terkini, sampai adanya akun berita untuk tiap
daerah tertentu. Ini seperti kita membaca koran atau membaca sebuah website berita
di internet, malah memiliki dampak positif yang lain yaitu waktu publikasinya yang
dapat dipublikasikan kapan saja. Tidak seperti koran yang memiliki jenjang waktu
sehari agar kita dapat mengetahui berita terbaru.

Kami juga mempertimbangkan motivasi orang untuk apa orang tersebut

menggunakan sosial media, apakah sekedar untuk berbagi pesan dengan orang lain,
atau untuk mengikuti salah satu yang menjadi trend saat ini yaitu menggunakan media
sosial sebagai bentuk eksistensi diri. Akhirnya kami memilih tema yang mirip dengan
Instagram, karena kami merasa Instagram dapat menjadi alternatif yang cocok bagi
pengguna yang hanya untuk sekedar berkomunikasi ataupun sebagai eksistensi diri.

Mengapa demikian? Jika untuk masalah eksistensi diri tentunya semua sudah
paham kenapa Instagram menjadi salah satu pilihannya. Bagi orang yang hanya
sekedar untuk berkomunikasi dengan orang lain, terdapat pula bagian Direct Message
untuk saling bertukar pesan, foto atau video, dan lain sebagainya. Pada Instaagram
terdapat pula beragam macam berita yang hangat, atau konten-konten lucu lainnya

6
yang dapat menghibur mengisi waktu kosong anda. Banyak juga orang yang berjualan
online di Instagram.

Tetapi pasti ada kekurangannya bukan? Bagi orang yang hanya sekedar ingin
menghubungi orang lain tetapi dengan cara berkomunikasi, Instagram memang tidak
bisa digunakan. Instagram tidak terdapat fitur untuk melakukan panggilan langsung
seperti sosial media lainnya. Tetapi, jika orang tersebut ingin berinteraksi dengan
orang lain tanpa menggunakan panggilan secara langsung, tentu Instagram-lah
pilihan terbaik. Dengan kehilangan fitur panggilan langsung, anda dapat merasakan
banyak fitur lainnya dan juga kegunaan lainnya seperti membaca berita, hiburan,
melihat online shop, dan lain sebagainya.

Pada proyek yang kami buat, kami juga menambahkan fitur ‘Quotes’ yang
sedikit terlihat seperti ‘tweets’ dalam sosial media Twitter. Terkadang seseorang
hanya ingin menunggah sebuah potongan kata-kata tanpa mengunggah foto. Pada
Instagram, kita hanya dapat mengunggah foto beserta tulisan atau caption-nya atau
tanpa caption sekalipun. Tetapi tidak dapat berlaku kebalikannya. Kita tidak dapat
mengunggah tulisan saja tanpa menunggah foto terlebih dahulu. Jadi pada proyek ini
kita menambahkan sebuah fitur yang bernama ‘Quotes’ yang memungkinkan hanya
mengunggah teks tanpa foto. Mungkin saja seseorang hanya ingin sekedar meng-
update status tanpa mengunggah foto apapun.

Karena kelompok kami diberi nama Loli, maka dari itu kami membuat sosial
media yang hanya berisikan para Loli. Tentu saja ini hanya untuk hiburan, tidak akan
ada sosial media yang hanya berisi Loli. Mungkin ini akan menjadi terlihat sedikit
seperti sebuah aplikasi yang berisikan para bot Loli. Tidak akan ada berita apapun
dalam pembuatan sosial media ini. Ini hanya sebuah pemikiran kami karena kelompok
kami diberi nama Loli.

Mengingat keterbatasan kemampuan yang kami miliki, disini kami akan

membahas tentang batasan pengerjaan proyek yang kami buat. Pada proyek yang
kami buat, kami hanya membuat sampai sebatas tampilan dan beberapa fitur-fitur
utama lainnya, seperti tombol-tombol, comment, dan lain sebagainya. Untuk comment
sendiri, kami hanya membuat sampai comment tersebut dapat ditampilkan, tetapi
tidak dapat menyimpannya didalam sebuah memory sementara. Jadi jika page
tersebut di refresh, maka comment yang telah kita input akan hilang.

7
 Pada proyek kami, juga tidak terdapat pengaplikasian database apapun.
Contohnya pada form Login dan SignUp, kita dapat menginput inputan apapun
didalam form tersebut. Bahkan kita dapat mengosongkan form tersebut dan langsung
menekan tombol Login atau SignUp tersebut untuk masuk ke dalam Home Page.
Paga bagian Friends, Post, DM, dan lain sebagainya juga hanya merupakan sebuah
hardcode. Jumlah Friends tersebut hanya kita hardcode dan kita tentukan berapa
banyak Friends yang ada. Jadi Friends disana tidak akan bisa bertambah maupun
berkurang. Di bagian DM jg itu hanya sebuah tampilan dengan hardcode, ibarat kita
telah melakukan pertukaran pesan dengan orang lain. Di bagian Post juga hanya
sebuah hardcode untuk menampilkan foto-foto yang telah diposting. Itu semua tidak
ada kaitannya dengan database, hanya sebuah tampilan mutlak untuk menampilkan
hasilnya saja.

Selanjutnya ke bagian responsivity, menurut kami juga dibagian ini kami

merasa kurang. Jika page tersebut di perkecil secara horizontal terlalu banyak sampai
sekitar dibawah 50%, itu akan membuat page tersebut menjadi tidak teratur isinya.
Jika diatas itu, kemungkinan sebagian besar dari page tersebut masih dapat dibilang
cukup teratur. Untuk bagian perkecil secara vertikal, itu tidak akan berdampak apa-
apa karena jika kita perkecil bagian secara vertikal hanya akan membuat bagian yang
tampak menjadi terpotong dan dapat digunakan scroll bar pada browser tersebut
untuk melihatnya.

Adapun tujuan dan manfaat dari pengerjaan proyek kami ini. Tujuan dari
pembuatan proyek ini bisa terhadap kita sendiri maupun untuk orang lain. Begitu juga
untuk manfaat pengerjaan proyek ini, mempunyai manfaat untuk kami dan orang lain
juga. Menurut kami tujuan dan manfaat pengerjaan dari proyek ini hampir sama, jadi
kita akan menjelaskannya bersamaan saja.

Tujuan kami membuat proyek ini, sebagian sudah dibahas diatas sebelumnya.
Kami memperkirakan masalah motivasi seseorang untuk menggunakan sosial media,
apakah sebatas ingin saling bertukar pesan dengan orang lain atau ingin
menunjukkan eksistensi diri. Jadi disini kami ingin menggabungkan kedua pemilik
motivasi tersebut menjadi satu sosial media.

Tujuan utama kami membuat proyek ini, tentu saja untuk memenuhi tugas
Design Web kami. Tetapi ini juga latihan untuk kami dan mengukur seberapa jauh

8
pemahaman kami tentang mata kuliah Design Web didalam masa pandemi ini. Kami
berharap nantinya jika kami sudah mempunyai kemampuan yang lebih mumpuni,
kami dapat mencoba melanjutkan proyek ini dengan melewati batasan-batasan yang
telah dijelaskan sebelumnya.

Manfaat dari membuat tugas proyek ini, yakni kami dapat belajar dan mencoba
menyatukan semua materi yang ada pada satu semester ini. Kami juga dapat belajar
dari sumber yang lain agar proyek ini dapat semakin mendekati ‘sempurna’ meskipun
proyek kami ini masih jauh dari kata ‘sempurna’. Manfaat lainnya yang bisa kami dapat,
yaitu kami dapat melatih kreativitas untuk memikirkan suatu model atau rancangan
yang ingin kami buat, dan dapat mengembangkan ide-ide dari hasil yang sudah ada.

Selanjutnya, manfaat lain membuat proyek ini secara berkelompok yaitu

melatih kebersamaan dan teamwork, tanggung jawab, diskusi, dan membagi waktu.
Untuk orang yang tidak bekerja dan memiliki waktu seharian untuk belajar hal yang
baru, mungkin poin diatas tidak begitu penting bagi mereka. Bisa saja bagi mereka
waktu yang diberikan malah terlalu lama. Tetapi, bagi sebagian orang yang sedang
bekerja dan hanya memiliki waktu yang sedikit untuk mengerjakan tugas atau proyek,
poin diatas sangatlah penting. Mereka harus bisa membagi waktu mereka; kapan
waktu untuk mengerjakan proyek, kapan untuk mengerjakan tugas lain, belum lagi
waktu yang digunakan untuk mempelajari hal lain diluar dari materi yang diajarkan.
Jadi tanggung jawab dari mereka sangat diperlukan untuk tugas kelompok proyek
seperti ini.

Mengenai kelanjutanproyek ini pada masa yang akan datang, proyek ini dapat
menjadi acuan atau pondasi jika semisalnya kemampuan kami sudah mencukupi dan
ingin membuat sebuah sosial media. Kami dapat melanjutkan tugas proyek ini dan
mengembangkannya menjadi sebuah sosial media yang layak digunakan.

9
 PENJELASAN TEKNIS

Diatas ini merupakan potongan kode untuk menghasilkan sebuah form yang terlihat
juga diatas.

Untuk bagian border kami

menggunakan format CSS seperti ini.
Ukuran form yang kami buat berukuran
360x410px. Margin-top yang
digunakan 50px untuk membuat form
tersebut menjadi memiliki jarak dari
bagian atas page tersebut sejauh 50px.
Margin-left dan right yang kami
gunakan adalah auto yang berfungsi
untuk membuat form tersebut menjadi
ke tengah sesuai dari resolusi layar
pengguna. Text-align: center membuat semua isi dari form tersebut menjadi ke bagian
tengah seperti bagian margin-left dan right sebelumnya, tetapi ini terhadap isi form
dengan bordernya. Background-color yang kami gunakan adalah white. Memang
white merupakan warna bawaan, tetapi karena pada body telah diganti bgcolor
menjadi #FAFAFA maka jika kita tidak membuat menjadi white itu akan berakibat
warna dari form tersebut menjadi #FAFAFA juga. Border: 1px (ketebalan border) solid
(jenis border) #cccccc (warna dari border) dan font yang kami gunakan adalah Arial
untuk seluruh isi dari form, kecuali jika diganti tersendiri untuk bagian tertentu. Color:
grey untuk membuat seluruh isi dari form tersebut menjadi grey, termasuk juga warna
dari tulisan.

10
 Bagian ini merupakan CSS dari bagian
heading. Font yang kami gunakan adalah
Leckerli One yang diambil online dari
fonts.googleapis.com. Cursor yang kita
gunakan adalah pointer, jika tidak diganti
maka cursor bawaannya adalah seperti
menunjukkan itu adalah sebuah teks.
Padding-top ini hampir sama seperti margin-top diatas, bedanya padding terletak
didalam margin lagi. Itu terasa seperti sangat jauh meski hanya 15px, karena <h1>
dari html memiliki sudah memiliki margin bawaannya sendiri dan ditambah padding
15px tersebut lagi. Tulisan warna diubah menjadi black karena pada form kita ganti
semua warna menjadi grey. Ukuran size kami ubah menjadi 250% dari ukuran bawaan
<h1>. Font-weight kami ubah menjadi normal, karena bawaan dari <h1> membuatnya
seperti bold.

Ini adalah CSS dari bagian tempat menginput id

dan password. Disini kami menggunakan dua
type, yaitu id yang merupakan form yang dapat
menampilkan hasil apapun yang kita input, dan
password yang akan menampilkan seperti
sebuah titik yang berasal dari inputan kita yang
telah diganti tampilannya. Border-radius
digunakan untuk membuat sudut dari form
tersebut menjadi lebih bundar atau tidak tajam.
Sisa penjelasan yang lain sama seperti bagian
sebelumnya, hanya mengganti angka-
angkanya. Dibagian form password juga kami
sediain sebuah fitur untuk show password jika
kita mengceklis checkboxnya (diberi fungsi
“myFunction). Berikut script yang digunakan :

Pada form password, kami beri id

“myInput”.Jika type pada myInput
merupakan passworddan kita
mengceklis checkbox tersebut, maka
yang terjadi adalah type dari form
tersebut menjadi text seperti bagian id
(bagian if). Jika kita menghilangkan
ceklis dari checkbox, maka type dari
form tersebut menjadi password (bagian else).

11
 Pada bagian CSS dari button LogIn ini, mungkin
semuanya sudah dijelasin dibagian sebelumnya,
sisa border: hidden. Karena bawaan button dari
html memiliki sebuah border yang lumayan tebal,
jadi kita membuat border tersebut menjadi
tersembunyi. Jadi pada tombol tersebut tidak aka
nada border apapun lagi. Tidak ada yang
memisahkan antara warna dari button dengan
background dari form tersebut lagi. Pada bagian
button juga kami tambah sebuah script yang membuat tombol tersebut menjadi href
dan membawa kita ke bagian home jika di tekan.

Pada bagian tulisan --- OR --- , itu hanya dibuat dengan <p> dan dua buah <hr>
dengan fungsi CSS yang hanya disesuaikan seperti margin, ukuran dan warna. Satu
<hr> kami buat float: left untuk bagian kiri dan float:right untuk bagian kanan.

Pada bagian LogIn dengan Facebook dan Forgot password, itu hanya sebuah <p>
karena kita tidak menggunakan database apapun dan tidak berhubungan dengan
Facebook. Jadi itu hanya sebuah tulisan yang tidak bisa digunakan. Icon dari
Facebook kami ambil dari kit.fontawesome.com yang sudah dideklarasikan diatas.

Code diatas yang akan menghasilkan tampilan seperti dibawah ini:

Untuk CSS bagian ini, mirip dengan CSS bagian border1, hanya berbeda pada
ukurannya. Warna dari teks tersebut juga berubah menjadi grey, karena kita
menetapkannya pada awal membuat form border2 tersebut.

Untuk bagian <a> kami buat href ke page SignUp,

dan text-decoration: none digunakan untuk
menghilangkan garis bawah dari <a> yang menjadi
bawaan html. Warna tulisan juga kami ganti menjadi
#56C4FF

12
 Diatas merupakan potongan
code dan hasil yang akan dihasilkan dari code tersebut pada bagian SignUp page.
Untuk bagian<h1> nya sama seperti pada LogIn page. Tulisan dibawahnya itu hanya
menggunakan <p> dan dibuat menjadi tebal dengan <strong>. Untuk tombol yang
digunakan, ini merupakan gabungan dari dua bagian pada bagian LogIn page
sebelumnya. CSS buttonnya mirip dengan sebelumnya, hanya saja isinya diganti
menjadi Login with Facebook yang CSS nya sama juga seperti yang sebelumnya.
Bagian --- OR --- juga sama seperti bagian sebelumnya. Pada bagian form pengisian,
kami menambahkan dua buah form yang bertype text. Jadi sekarang menjadi tiga
buah form bertype text dan tetap satu form bertype password yang dapat diganti juga
menjadi text dengan checkbox dan scriptnya. CSS dan script nya juga sama dengan
bagian LogIn page. Tombol SignUp juga sama seperti sebelumnya, hanya saja kami
menambah style tersendiri untuknya karena padding pada CSS button di set untuk
bagian button yang pertama, jadi untuk button yang ini kami membuat padding yang
tersendiri untuknya. Tulisan yang dibawah hanya menggunakan <p> dan kami beri id

13
‘a’ untuk mengubah ukuran font dan margin-marginnya pada CSS. Ingat ini hanya
diberi id ‘a’, berbeda dengan CSS bagian <a>.

Tidak ada bagian atau CSS yang baru dibagian ini, masih mirip dengan bagian
sebelumnya. Warna teks tetap bawaan dari format form tersebut yaitu grey, dan
bagian <a> juga dihilangkan text-decoration beserta diganti warna tulisannya. Bagian
<a> ini akan membawa kita ke bagian LogIn page jika ditekan.

Masih sama seperti bagian sebelumnya, tidak

ada yang baru dari bagian ini, malah lebih
sederhana dari sebelumnya. Dibagian ini hanya
terdapat <h1> yang masih sama dengan
sebelum-sebelumnya, sedikit tulisan dengan
<p> dan sebuah tombol yang dihubungkan ke
bagian Homepage. Terdapat pula <br> yang
akan membuat baris baru atau seperti fungsi
enter pada word. Berlaku juga pada bagian-
bagian sebelumnya.

14
Pada bagian ini juga, tidak ada yang berbeda dari border2 sebelumnya. Hanya
berbeda pada isinya. Model dari CSS nya juga sama. <a> disini akan membawa kita
ke Login page sebelumnya.

Pada bagian ini, digunakan pada hampir seluruh page. Bagian ini terletak pada bagian
atas seluruh page kecuali tiga page sebelumnya.

Untuk class headerborder, fungsinya untuk menampung

isi-isi dari header tersebut. Z-index digunakan agar ia tak
tertimpa dan menimpa yang lainnya. Untuk bagian border
kami sisain bagian bawah untuk ditampilkan.

Untuk class myHeader, kami membuat position: fixed agar header

ini tidak akan bergerak jika page ini di scroll ke atas atau bawah.
Top: 0 untuk membuatnya di bagian paling atas page. Width: 100%
untuk membuat panjang header ini mengikuti ukuran dari page kita saat ini (dalam
bentuk full screen maupun diperkecil).

Class ini digunakan untuk membuat img kita berubah menjadi

bundar dengan border-radius: 50%.

Untuk bagian navbar, kami menggunakan bootstrap untuk membuatnya. Tidak ada
CSS khusus untuk class ini. Navbar-brand merupakan title untuk header tersebut.
CSS dari id title sama seperti
bagian h1 sebelumnya, yang
menggunakan font dari

15
fonts.googleapis.com dan pointer yang diubah. Untuk icon-iconnya, kami juga
mengambilnya dari kit.fontawesome.com seperti icon Facebook sebelumnya. Pada
bagian kolom search, kami juga menambahkan sedikit script untuk membuat tombol
enter berfungsi disana. Berikut scriptnya:

Tetapi tombol search ini jika ditekan enter, maka yang terjadi adalah mereload page
kembali karena kami tidak menggunakan database untuk bisa melakukan pencarian.

Untuk bagian CSS class yang lainnya, itu hanya berupa margin, padding, color, dan
lain sebagainya yang telah dijelaskan kegunaannya sebelumnya. Itu digunakan hanya
untuk merapikan dan menata letak-letaknya.

Ini merupakan code yang digunakan untuk menampilkan hasil seperti yang telah
ditunjukkan. Ini hanya permainan dari Positioning yang akan menghasilkan tampilan
seperti itu. Disini kami hanya akan menjelaskan code-code yang dapat digunakan atau
berfungsi.

Ini merupakan script yang digunakan untuk

membuat tombol like dapat ditekan dan
berubah menjadi warna merah dan
sebaliknya. Class fa-heart yang digunakan
untuk mengubahnya menjadi warna merah
telah ditulis pada bagian style sebagai berikut

16
 Selanjutnya ini merupakan script untuk bagian
caption yang digunakan untuk show less jika
caption tersebut terlalu panjang dan show
more jika ingin melihat caption yang terpotong.
Sebenarnya dibagian script ini seperti
mengganti-ganti CSS yang ada. Hanya
diantara none dengan inline, tinggal
disesuaikan dengan yang diinginkan. Kedua
script dari fungsi tersebut juga hanya
merupakan kebalikan dari satu sama lainnya.

Script ini digunakan untuk

menambah comment pada
post tersebut. Penjelasannya
dapat diperkirakan seperti ini :

Pada button submit comment

terdapat: onclick="addcomment('user1','com1','comment_new_1')"

Selanjutnya kita melakukan inisialisasi dari parameter tersebut:

- var comment, menampung value dr id comx (isi dari comment yg akan dipost)
- var comment_user, menampung innerHTML dr id userx (username)
- var tag, menampung element <p>
- var bold, menampung element <b>
- var element, menampung element dr id newx (div / tmpt comment baru)
- var text, menampung var comment yg telah diubah menjadi textnode
- var username, menampung var comment_user yg telah diubah menjadi textnode

Kemudian fungsi dari setiap parameter tersebut:

- element.appendchild(tag) : var tag di append ke var element, sehingga menjadi:
<div><p></p></div>
- bold.appendchild(username) : var username diappend ke var bold sehingga
menjadi : <b>username</b>
- tag.appendchild(bold) : var bold diappend ke var tag sehingga menjadi :
<div><p><b>username</b></p></div>

17
- tag.appendchild(text) : var text diappend ke var tag sehingga menjadi :
<div><p><b>username</b>text</p></div>

18
Disini juga banyak menggunakan Positioning, bawaan dari bootstrap, dan kami tidak
akan membahasnya lagi. Kami akan membahas yang baru dari bagian ini.

Yang pertama merupakan scroll bar. Overflow disini

yang berfungsi untuk menampilkan scrollbar
tersebut jika isi dari tempat yang telah disediain
telah berlebih. Overflow disini kami buat menjadi
auto yang berfungsi untuk menampilkan sendiri
scroll bar jika isinya telah berlebih. Seandainya
pada contoh hasil sementara diatas, jika Your Friends hanya berisi 2, maka scroll bar
tersebut tidak akan muncul karena belum melewati tempat yang telah disedikan.

Yang kedua, pada bagian ini jika width dari browser kita buat kurang dari 1270px,
maka bagian dari class sidebar akan dihilangkan. Karena pada bagian ini class
utamanya merupakan sidebar, maka seluruh dari bagian ini akan hilang jika kita
membuat width dari browser dibawah 1270px. Dan bagian dari class ‘main’ yaitu
bagian yang sebelumnya dijelaskan akan berubah menjadi ke bagian tengah dengan
margin: 0 auto.

Sekarang kita masuk ke bagian

homepage untuk quotes. Bagian ini tidak banyak berbeda dari homepage untuk post,
bedanya hanya pada isinya yang dapat dilihat. Pada bagian ini yang berbeda hanya
bagian ini dan satu bagian yang akan dijelaskan selanjutnya. Pada bagian ini juga
hampir mirip dengan bagian sebelumnya, bedanya bagian ini tidak berisi sebuah foto
untuk ditampilkan, dan ini juga kebanyakan menggunakan bawaan dari bootstrap.
Untuk sumber dari icon juga sama seperti sebelumnya, dan scriptnya juga sama yang
membuat ia dapat ditekan dan berubah jadi merah. Sisanya hanya permainan
Positioning untuk menata letak-letaknya.

19
Inilah bagian lain yang berbeda dengan homepage post. Pada bagian atas terdapat
sebuah kolom untuk menambahkan sebuah quotes baru, dan pada bagian bawah itu
merupakan quotes baru yang telah ditambahkan dari hasil inputan dari bagian kolom
atas. Hasil quotes yang baru akan tampil pada bagian paling atas dari tampilan semua
quotes yang kita jelaskan sebelum ini. Ada juga penjelasan script yang digunakan:
(code script terlalu panjang untuk di tampilkan)

Fungsi addpost()
- Inisialisasi var parent, menampung element dr id 'post_new'
- Inisialisasi var div, menampung element <div>
Insert var div ke var parent sebagai firstchild
Menambah class card, mb-4, ml-0 pada div
Menambah style width = 100% pada div
Hasil :
<div id="post_new">
<div class="card mb-4 ml-0" style="width: 100%;"></div>
</div>
- Inisialisasi var div2, menampung element <div>
var div2 di-append ke var div
Menambahkan class row, no-gutters ke div2
Hasil :

20
 <div id="post_new">
<div class="card mb-4 ml-0" style="width: 100%;">
<div class="row no-gutters"></div>
</div>
</div>
- Inisialisasi var div3, menampung element <div>
var div3 di-append ke var div2
Menambahkan class col-md-2 ke div3
Hasil :
<div id="post_new">
<div class="card mb-4 ml-0" style="width: 100%;">
<div class="row no-gutters">
<div class="col-md-2"></div>
</div>
</div>
</div>
- Inisialisasi var img, menampung element <img>
var img di-append ke var div3
Menambahkan class card-img, post_profilepicture, px-3, py-3 ke img
Menambahkan source img (a.png)
Hasil :
<div id="post_new">
<div class="card mb-4 ml-0" style="width: 100%;">
<div class="row no-gutters">
<div class="col-md-2">
<img class="card-img post_profilepicture px-3 py-3" src="a.png">
</div>
</div>
</div>
</div>
- Intinya step by step disini hanya akan terus menambah bagian dari step
sebelumnya sampai menghasilkan :
Hasil:
<div id="post_new">
<div class="card mb-4 ml-0" style="width: 100%;">
<div class="row no-gutters">
<div class="col-md-2">
<img class="card-img post_profilepicture px-3 py-3" src="a.png">
</div>
<div class="col-md-10">
<div class="card-body">
<h5 class="card-title"><b>username</b></h5>
<p> text </p>
<p class="card-text"><small class="text-muted">just now</small></p>

21
 <p class="card-text" style="text-align:right;">
<i class="fa fa-2x fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-2x fa-share-alt" aria-hidden="true"></i>
</p>
</div>
</div>
</div>
</div>
</div>

22
Ini adalah bagian dari DM Page. Border1 merupakan bagian box yang berisi kata
‘Direct’. Border2 merupakan daftar-daftar nama yang pernah saling bertukar pesan
dengan kita. Dari bagian “card ml-0” sampai bawah, itu hanya untuk menambahkan
sebuah nama list disana. Jika ingin menambah yang lainnya, dapat menduplikasi code
tersebut. Class card tersebut juga diambil dari bootstrap, dan ml-0 berarti margin-left
yang bernilai 0. Pada bagian border2 juga diberikan overflow: auto seperti sidebar
pada homepage sebelumnya untuk menampilkan scroll bar jika list dari orang yang
telah bertukar pesan telah melebihi tempat yang tersedia. Pada bagian awal dari card
juga ditambah sebuah fungsi openChat yang berfungsi untuk membuat perubahan
pada bagian yang akan kami bahas selanjutnya.

23
Dibagian ini juga kami membuat warna-warna dari berbagai aksi yang dilakukan.
Hover berarti jika cursor atau pointer kita sedang menunjuk pada kolom tersebut,
tetapi kita tidak menekannya. Warna tersebut dapat dilihat pada bagian tengah contoh,
warna diantara putih dengan abu-abu. Selanjutnya active, berarti itu merupakan kolom
yang sedang aktif, yang menunjukkan kita sedang membuka chat box orang tersebut.
Itu dapat dilihat pada contoh paling atas, kita berikan warna abu-abu yang lebih tua
dari bagian hover. Terakhir warna kolom yang tidak kita beri aksi, warna dasar yaitu
putih.

24
Ini adalah bagian yang akan berubah tergantung aksi yang dilakukan pada bagian
sebelumnya. Dibagian awal terlihat sebuah id digunakan untuk tujuan dari fungsi
openChat sebelumnya, yang dimana akan menampilkan bagian dari chat id yang aktif
pada bagian sebelumnya. Jadi tentunya terdapat banyak bagian ini dan diulang-ulang
penulisannya, yang berbeda hanya id dan isi yang akan ditampilkan. Pada bagian
border4, itu merupakan profile dari orang yang kita buka chat box nya. Disana tertera
gambar, nama, dan apakah orang tersebut sedang online atau offline. Ini sama seperti
bagian sebelum-sebelumnya yang menggunakan card bawaan dari bootstrap. Pada
border3, itu merupakan isi dari pesan yang telah dikirim dan yang diterima.

Terdapat juga sebuah kolom untuk menulis apa yang akan kita kirim, tetapi
ini hanya merupakan sebuah tampilan yang hanya dapat diinput pesannya dan tidak
dapat dikirim atau ditampilkan. Class yang terdapat pada border3 telah kami atur pada
bagian style diatas, dimana hanya berupa color, padding, dan lain sebagainya yang
digunakan untuk mengatur Positioning. Yang ada pada contoh code diatas, itu hanya
merupakan dua pesan teratas, dan jika ingin menambahkan pesan yang lain, dapat
mengcopy-paste code tersebut. Disana juga terdapat sebuah style berupa width, yang
berfungsi untuk mengatur panjang dari kolom chat tersebut. Contohnya pada bagian
chat ‘LOL’, itu hanya menggunakan width sebesar 10%. Pada bagian type_msg
sampai akhir juga telah diatur stylenya terlebih dahulu diatas. Sama seperti
sebelumnya, hanya berupa bagian untuk mengatur Positioning dan tampilan. Tampak
disana tidak memiliki fungsi apapun, jadi ini semua hanya sebuah tampilan fake chat
yang dibuat-buat.

25
Ini merupakan bagian dari Notification Page. Tidak ada yang baru dari bagian page
ini, hanya menggunakan bagian-bagian yang telah banyak digunakan pada bagian
sebelumnya yaitu card bawaan bootstrap. Pada bagian notifikasi terakhir, kami
gunakan button yang di disabled dan berisi tulisan accepted. Pada bagian atasnya,
terdapat pesan jika kita dengan pengguna lain yang mengirimkan permintaan
pertemanan sebelumnya telah menjadi Friends. Jadi disini anggapannya bahwa kita
telah menerima permintaan pertemanannya dan telah menjadi Friends. Yang berbeda
dari bagian ini adalah bagian dari div ke-3 dari setiap card tersebut, tergantung dari
notifikasi apa yang kita dapat.

Pada bagian explore, terdapat dua macam model penyusunan. Model pertama yaitu
penyusunan seperti yang dapat dilihat diatas. Kata kunci disini dapat dilihat pada
column-count: 3, yang berarti pada satu buah card dapat menampung tiga buah kolom
yang dapat diisi. Width kami buat 100% karena pada card tersebut sudah dibagi tiga
bagian, jadi 100% berarti mengisi seluruh bagian dari 1/3 bagian card tersebut.

26
 Model kedua, yaitu model yang dapat
kita lihat di sebelah kiri ini. Disini kami
hanya membuat column-count:1, dan
membuat gambar dibagian kiri sebesar
66%, sedangkan dibagian kanan hanya
sebesar 32% dan membuat float: right.
Ini dikarenakan kolom yang kami buat
hanya sebanyak satu, jadi dalam satu
kolom tersebut kami bagi menjadi dua
bagian dengan ukurannya masing-
masing yang jika ditotal akan mendekati 100% yang berarti mengisi seluruh bagian
satu kolom dari card tersebut. Float:right pada dua gambar di sebelah kanan agar
kedua gambar tersebut dapat disusun di sebelah kanan dari gambar sebelah kiri yang
lebih besar.

Pada bagian ini juga kami membuat hover seperti pada bagian sebelumnya, tetapi ini
sedikit berbeda. Terdapat pula shadow dibagian ini, warna yang kami pakai dapat
terlihat diatas. Kami juga mengatur tingkat kecerahannya menjadi 80% jika terdapat
cursor diatasnya. Cursor disini juga kami ganti menjadi pointer.

27
Ini merupakan modal yang kami ambil dari bootsrap. Bagian ini berfungsi untuk
menampilkan sebuah pop-up jika kita menekan sebuah foto pada bagian yang kita
bahas sebelumnya. Seluruh bagian code tersebut kami ambil dari bootsrap dan hanya
bagian isinya yang kami ubah. Pada gambar potongan code diatas juga sudah kami
bagi bagiannya. Tombol like pada modal disana juga kami beri sebuah fungsi yang
dapat berubah menjadi merah jika ditekan dan sebaliknya yang sama seperti bagian
yang sudah dibahas diatas. Pada bagian ini memang kebanyakan memakai bawaan
bootstrap dan bagian isinya juga sudah pernah dijelasin sebelumnya.

Bagian ini merupakan bagian dari profile dari pengguna. Disini kami hanya
menggunakan prinsip dari Positioning. Untuk bagian yang menunjukkan berapa
banyak post, quotes, dan friends sebelumnya sudah pernah dijelaskan pada bagian
DM page pada bagian pemilihan border2. Tetapi pada bagian ini, yang dapat ditekan
hanya pada bagian friends, yang jika ditekan akan menghasilkan sebuah modal yang
berisi nama dari Friends kita. Berikut code dan contoh tampilannya:

Penjelasan untuk bagian modal sama seperti bagian sebelumnya.

28
Selanjutnya kita masuk kebagian lebih bawan dari bagian profile page. Bagian tombol
ini sama seperti pada bagian tombol friends sebelumnya, tetapi ini tidak akan
menampilkan modal melainkan akan menuju page lainnya. Untuk bagian profile,
terdapat dua macam page, yaitu yang pertama page untuk post yang hampir mirip
dengan bagian explore dan bagian quotes yang hampir mirip dengan bagian
homepage quotes.

Dapat dilihat bahwa codenya juga

serupa dengan bagian explore
sebelumnya. Jika kita ingin
menambah gambar lainnya, maka
kita hanya perlu menduplikasi code
tersebut juga.

Ya, bagian ini juga serupa dengan

bagian homepage quotes, hanya
akan kami ubah pada bagian isinya
saja. Terdapat juga tombol like
pada bagian ini yang memiliki
fungsi yang sama pula.

Sekarang kita masuk pada bagian Profile

Friend Page. Pada page ini hanya
ditambahkan tombol ‘add friend’ dari
Profile Page sebelumnya. Tidak ada
fungsi apapun pada tombol ini, hanya
sebagai sebuah tampilan yang
membedakannya dengan profile user.
Pada bagian ini yang kami ubah hanya
bagian Positioningnya. Pada bagian
lebih bawah dari profile friend, tidak ada
yang berubah dari profile user sendiri.

29
 FITUR-FITUR UTAMA

Pada bagian Login Page, terdapat dua buah form yang dapat diisi. Form pertama yaitu
form ID yang dapat berupa phone number, username, ataupun email. Form kedua
yaitu form password yang pada awal penginputan akan di ‘sensor’ dan jika kita
mengceklis checkbox dibawahnya, form password tersebut akan berubah menjadi
seperti form ID yang dapat dilihat apa yang diinput. Ini merupakan hasil dari fungsi
checkbox yang berguna untuk mengganti tipe form password menjadi sama seperti
form ID. Berikut contohnya:

Disini juga terdapat sebuah hyperlink yang dapat membawa kita ke bagian Signup
Page. Untuk bagian ‘Log in with Facebook’ dan ‘Forgot password’, ini hanya
merupakan sebuah tampilan yang bukan merupakan hyperlink. Tombol Log In akan
membawa kita ke bagian homepage, meski kita tidak mengisi kedua form diatas.

30
Di bagian SignUp Page, disini terdapat dua buah button dan empat buah form. Button
pada bagian atas kami tidak berikan fungsi apapun disana, sama seperti bagian ‘Log
in with Facebook’ sebelumnya yang hanya merupakan tampilan, bedanya disini
menggunakan sebuah button. Selanjutnya, empat form ini terdapat tiga buah form
bertipe text yang dapat menunjukkan apapun yang kita input, dan sebuah form bertipe
password yang diberikan sebuah checkbox juga yang berfungsi untuk mengubah tipe
form password tersebut menjad text. Button kedua, yaitu button yang berfungsi untuk
membawa kita ke bagian page perantara pesan yang memberitahukan bahwa akun
yang kita buat telah berhasil dibuat. Terdapat juga sebuah hyperlink yang
dihubungkan dengan Login Page sebelumnya.

Inilah page perantara tersebut. Tidak ada fitur yang baru disini. Hanya terdapat
sebuah button yang berfungsi menuju homepage dan sebuah hyperlink yang
dihubungkan dengan Login Page juga.

31
Dari bagian page ini sampai seterusnya, navigation bar diatas akan selalu hadir pada
seluruh page kedepan. Kolom search disini sebenarnya tidak ada fungsinya karena
kami tidak memakai database apapun, tetapi kolom search tersebut masih dapat diisi
dan jika kita menekan enter hasilnya akan membuat page tersebut reload.
Menuju ke bagian kanan, terdapat icon-icon yang berfungsi untuk membawa kita
ke page-page utama lainnya. Berikut list icon dan tujuan pagenya:
- Icon Home yang akan membawa kita ke Homepage Post
- Icon Envelope yang akan membawa kita ke DM Page
- Icon Compass yang akan membawa kita ke Explore Page
- Icon Bell yang akan membawa kita ke Notification Page
- Icon Gambar yang akan membawa kita ke Profile User Page

Jika kita memperkecil page sampai ukuran tertentu, maka icon-icon tersebut dan
kolom search akan tersembunyi didalam sebuah icon List.

Inilah yang akan terjadi jika kita menekan icon list tersebut, ini akan menampilkan icon-
icon dan kolom search yang tersembunyi tadi. Dan bagian header ini menimpa bagian
yang lainnya, jadi jika kita membuka icon list tersebut, bagian header yang drop-
downtersebut akan menutupi sebagian kecil bagian dari content.

32
Masuk ke bagian homepage post, dibagian ini terdapat beberapa postingan berupa
gambar yang dapat kita beri comment. Pada bagian kanan terdapat nama akun kita
dan profile pic, dua buah button yang dapat memilih diantara ingin melihat homepage
post atau homepage quotes, sebuah kolom kecil berupa scroll box yang berisi Friends
kita dan terdapat juga beberapa tulisan. Fungsi dari kedua button tersebut, sudah jelas
dapat dilihat yaitu membawa kita ke page yang diinginkan. Untuk bagian scroll box,
jika kita memilih dan menekan salah satu dari Friendlist kita, itu akan membuat kita
menuju Profile Friend Page yang kita pilih.
Pada homepage juga terdapat sebuah fungsi yang mirip dengan header
sebelumnya yaitu jika kita memperkecil layar ke ukuran tertentu, maka item-item di
bagian kanan akan hilang dan post tersebut akan ke bagian tengah.

33
Pada bagian comment, tersedia juga sebuah kolom pada tiap post yang berfungsi
untuk menambahkan comment pada post yang kita isi kolomnya. Tetapi comment
tersebut tidak bersifat permanent, jika kita me-reload page tersebut maka comment
yang baru saja diinput akan hilang juga.
Pada tiap post juga terdapat sebuah tombol like yang dapat berubah menjadi
warna merah jika kita menekannya. Tombol ini dapat bersifat kebalikan, yang artinya
dapat kembali ke bentuk asli jika ditekan kembali.

Pada beberapa post juga terdapat [read more] dan [read less] pada bagian captionnya.
Ini berfungsi untuk menyembunyikan caption jika terlalu panjang dan dapat di buka
untuk dibaca seluruhnya jika diinginkan.

34
 Selanjutnya kita
masuk ke bagian homepage quotes. Pada bagian ini tidak jauh berbeda dengan
homepage post sebelumnya. Bedanya pada homepage post berisi postingan berupa
gambar, sedangkan pada homepage quotes berisi postingan berupa kutipan.
Fitur yang ada pada homepage quotes juga hampir sama dengan homepage
post, dapat menghilangkan sidebar dan memindahkan post ke bagian tengah jika
page diperkecil.

Pada bagian homepage quotes, inilah dua perbedaan utamanya. Pada kolom bagian
atas, itu merupakan bagian untuk menambahkan sebuah post baru. Disana juga
terdapat dua buah garis diagonal pada sudut kanan bawah kolom yang berfungsi
untuk memperkecil atau memperbesar kolom tersebut.

35
Jika inputan kita telah melebihi kolom yang ditentukan, maka kolom tersebut akan
berubah menjadi scroll box untuk dapat melihat inputan kita. Cara lain untuk dapat
melihat seluruh inputan kita yaitu me resize kolom tersebut dengan dua garis diagonal
tersebut.

Hasilnya:

36
Sekarang kita masuk ke bagain DM page. Tidak banyak fitur yang ada dibagian ini.
Kebanyakan hanya merupakan tampilan dari hardcode. Fitur utama disini hanya dapat
memilih diantara Friends yang sudah tersedia, dan tampilan dari chatbox pada bagian
kanan juga akan berubah sesuai dari pemilihan Friends. Pada kolom Friends yang
aktif, menggunakan warna abu tua; hover menggunakan warna abu muda; selain itu
menggunakan warna putih. Kolom inputan disana hanya sebagai sebuah tampilan.
Memang kolom tersebut dapat diinput, tetapi inputan tersebut tidak dapat di kirim.

37
Fitur utama pada Explore Page yaitu prubahan warna jika cursor kita melakukan hover
pada gambar, dan munculnya popup yang menampilkan post dari gambar tersebut.

Contohnya kita memilih gambar pertama, maka yang akan dihasilkan dapat dilihat
pada gambar diatas. Popup tersebut sekilas mirip dengan post pada homepage post,
hanya saja pada bagian ini tidak ada kolom comment untuk menambah comment.
Pada bagian comment tersebut juga sebenarnya merupakan scroll box, hanya saja
kami meng-hidescroll bar nya. Untuk keluar dari popup ini, kita dapat menekan icon X
pada sudut kanan atas, atau kita juga bisa meng-klik bagian luar selain dari modal
tersebut.

38
Sebenarnya tidak ada fitur yang mencolok dari Notification Page ini. Bagian dari
notification page ini mirip dengan yang dipakai sebelumnya dalam Homepage Quotes.
Ini menggunakan fitur card dari bootstrap, yang membuat seolah-olah kita mendapat
pesan dari media sosial ini. Ya! tidak ada fungsi aktif apapun pada bagian ini, hanya
terdapat tampilan-tampilan hardcode dari card tersebut.

Ini merupakan Profile User Page. Yang merupakan fitur aktif pada page ini yaitu pada
bagian friends, dan kedua tombol POSTS dan QUOTES. Kedua tombol ini fungsinya
sama seperti bagian sidebar pada homepage, yang digunakan untuk mengganti
pilihan diantara post dengan quotes. Sedangkan pada bagian friends, jika ditekan
akan menghasilkan sebuah modal yang berupa popup berisi friendlist-friendlist kita.
Isi dari popup ini juga sama seperti pada bagian sidebar homepage yang
menunjukkan list-list dari friends ktia, bedanya ini terdapat didalam modal. Seperti
inilah popup yang akan ditampilkan:

39
Untuk bagian isi dari post dan quotes, akan dijelaskan selanjutnya pada bagian Profile
Friend Page agar lebih terlihat.

Untuk Profile Friend Page, tidak jauh berbeda dengan Profile User Page sebelumnya.
Hanya ditambah sebuah tombol add friend, dan itu juga kami disabled. Disini kami
membuat seakan orang tersebut sudah ‘berteman’ dengan kita.
Untuk bagian isinya, pada bagian post konsepnya sama seperti bagian Explore
page sebelumnya. Tetapi disini hanya menggunakan column-count sebanyak 3, tidak
ada yang 1. Untuk bagian fitur aktifnya juga sama seperti paga bagian Explore page,
terdapat perubahan tampilan jika hover dan jika ditekan akan menghasilkan popup
modal juga.

Fungsi dari tombol like dan cara untuk keluar dari modal tersebut juga sama.

40
Untuk bagian quotes, konsep ini mirip dengan bagian homepage quotes sebelumnya.
Hanya mengubah ukuran dari postingan quotes dan gambar dari profile picture orang
tersebut. Untuk fungsi dari tombol like juga pasti sama dengan sebelum-sebelumnya.
Pada bagian friends di Profile Friend Page juga dapat menghasilkan modal jika
ditekan, dan akan menuju profile page dari user yang dipilih.

41
 HASIL DAN KESIMPULAN

Hasil dari tugas proyek ini menurut kami yaitu dapat membantu pembelajaran
mandiri kami didalam masa pandemi seperti ini. Kami juga menyadari hasil secara
bentuk dari tugas proyek ini tidak sempurna, masih terdapat banyak kekurangan.
Tetapi kami telah mencoba melakukan yang terbaik untuk tugas proyek ini.

Kesimpulan dari tugas proyek ini yaitu sebagian besar dari tugas proyek ini,
kami menggunakan bawaan dari bootstrap. Terdapat banyak hal dari penggunaan
bootstrap didalamnya, seperti card yang hampir dipakai pada semua bagian, modal
yang digunakan untuk bagian popup, dan lain-lain. Kami juga terbantu dengan adanya
w3schools yang memberikan banyak informasi mengenai cara-cara membuat sesuatu.
Seperti yang dikatakan sebelumnya, pada pembuatan proyek ini terdapat banyak hal
yang penerapannya sama dan dapat digunakan berulang-ulang. Yang paling penting
dalam pembuatan proyek ini adalah hal Positioning. Dalam setiap bagian, tentu
terdapat margin ataupun padding didalamnya. Kesalahan sedikit saja dalam hal itu,
maka page tersebut akan menjadi berantakan.

42
 KATA PENUTUP

Akhir dari dokumentasi ini, kami harap laporan ini dapat memeberikan informasi
tentang hal-hal yang Bapak harapkan dan inginkan. Terima kasih juga kami ucapkan
kepada Bapak yang telah membimbing dan mengajari kami selama satu semester ini.
Mengingat laporan dan tugas proyek ini masih jauh dari kata sempurna, mohon maaf
bila ada kesalahan kata-kata atau penyampaian dalam laporan ini. Sekali lagi, terima
kasih.

43
 REFERENSI

- https://getbootstrap.com/
- https://www.w3schools.com/
- https://www.instagram.com/
- https://stackoverflow.com/

Itulah referensi utama kami dalam membuat proyek ini, terdapat juga website-
website yang lain yang membantu kami jika kami tidak menemukannya pada
referensi utama diatas.

44