LAPORAN AKHIR THREAD CASE STUDY (TCS)
KATEGORI DESAIN WEBSITE
DESAIN WEBSITE “LAPERPOOL” MENGGUNAKAN ADOBE DREAMWEAVER CS6
Diajukan untuk Memenuhi Syarat THREAD CASE STUDY (TCS) Program Pendidikan Komputer dan Internet
Profesional 1 Tahun PalComTech
ANISA LAYANTI 812.018.0020
PROGRAM PENDIDIKAN KOMPUTER DAN INTERNET PROFESIONAL 1 TAHUN PALCOMTECH
OPI MALL 2021
1
ii
LEMBAR PERSETUJUAN
LAPORAN AKHIR THREAD CASE STUDY (TCS) KATEGORI DESAIN WEBSITE
DESAIN WEBSITE “LAPERPOOL” MENGGUNAKAN ADOBE DREAMWEAVER CS6
PENYUSUN : ANISA LAYANTI NIS : 812.018.0020
Laporan ini telah diperiksa dan siap diajukan untuk presentasi pada tanggal 26 Juni 2021
Pembimbing TCS
Kategori Desain Website Ko. Akademik,
Mezi Puspayani .S,kom Sri puji lestari
NIP : - NIP :-
LEMBAR PENGESAHAN
LAPORAN AKHIR THREAD CASE STUDY (TCS) KATEGORI DESAIN WEBSITE DESIGN WEBSITE “LAPERPOOL” MENGGUNAKAN ADOBE DREAMWEAVER CS6
PENYUSUN : ANISA LAYANTI NIS : 812.018.0020
Laporan ini telah diperiksa dan siap diajukan untuk presentasi pada tanggal 26 Juni 2021.
Penguji 1 Penguji 2
Hari Wibowo, A.Md Ferlian Satria, S.Sos
NIP: - NIP: -
Pimpinan
Ferlian Satria, S.Sos
HALAMAN MOTTO DAN PERSEMBAHAN Motto :
“Gunakan yang kamu punya dan lakukan yang kamu bisa”
Dipersembahkan untuk :
1. Tuhan Yang Maha Esa, yang telah memberikan rahmat dan karunia nya maka laporan ini dapat di selesai kan.
2. Terima kasih kepada diri sendiri yang telah berjuang dalam hal apapun.
3. Kepada Ayah(Rusdi) yang telah mendukung dan mebiayai segala kebutuhan hidup Penulis dan Ibu (Susi Lawati) yang senantiasa mendoakan dan mendukung Penulis supaya menjadi individu yang sukses, dan berguna bagi bangsa dan negara.
4. Seluruh Keluarga Besar toko laperpool yang telah menerima Penulis untuk membuat website toko.
5. Pimpinan,Instruktur dan Staff PalComTech yang telah berjasa mendidik dan mengurus kegiatan TCS Penulis.
6. Semua teman seperjuangan angkatan 18 kelas GMA.
KATA PENGANTAR
Puji dan Syukur Penulis Panjatkan kehadirat Tuhan Yang Maha Esa karena berkat limpahan Rahmat dan Karunia- Nya sehingga Penulis dapat menyelesaikan laporan ini. Laporan ini membahas Desain Website toko laperpool Menggunakan Adobe Dreamweaver CS6.
Dalam proses penyusunan laporan ini, Penulis tentu banyak mendapat tantangan dan hambatan akan tetapi dengan bantuan dari berbagai pihak semua bisa diatasi. Oleh itu, Penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah ikut membantu dalam penyusunan laporan tugas akhir ini, semoga bantuannya mendapat balasan yang setimpal dari Tuhan Yang Maha Esa.
Penulis menyadari bahwa laporan ini masih jauh dari sempurna. Saran dan kritik yang membangun dari pembaca sangat Penulis harapkan untuk menjadi lebih baik kedepannya.
Palembang ,16 juni 2021
Penulis
DAFTAR ISI
HALAMAN JUDUL
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
HALAMAN MOTO DAN PERSEMBAHAN ... iv
KATA PENGANTAR ... v
DAFTAR ISI ... vi
DAFTAR GAMBAR ... viii
DAFTAR TABEL ... xi
BAB I PENDAHULUAN 1.1. Latar Belakang ... 1
1.2. Tujuan dan Manfaat ... 2
BAB II PROFIL PERUSAHAAN 2.1. Sejarah Perusahaan ... 4
2.2. Visi dan Misi Perusahaan... 5
2.3. Struktur Organisasi ... 6
BAB III ANALISA DAN PEMBAHASAN 3.1 Persiapan Project ... 7
3.2 Pembahasan Project ... 8
... BAB IV KESIMPULAN DAN SARAN 4.1Kesimpulan ... 51
4.2Saran ... 52 DAFTAR PUSTAKA LAMPIRAN
- Lampiran Halaman Website - Lampiran Absensi Harian PKL - Lampiran Form Nilai PKL - Lampiran Plagiarsme - Dokumentasi
RIWAYAT HIDUP
DAFTAR GAMBAR
Gambar 1. Struktur Organisasi Volunteer Design ... 6
Gambar 2. Klik Start ... 8
Gambar 3. Membuka Aplikasi Adobe Photoshop Cs6... 9
Gambar 4. Ukuran Template Website ... 9
Gambar 5. Template Website...10
Gambar 6. Membuat Halaman Baru...13
Gambar 7. Halaman Awal...14
Gambar 8. Tag Div Awal...14
Gambar 9 . Kode Menu Sliding...15
Gambar 10. Memasukkan Logo Perusahaan...16
Gambar 11. Kode Menu Website...16
Gambar 12. Kode Footer...17
Gambar 13. Menyimpan Halaman Index...18
Gambar 14. Membuat Halaman CSS...20
Gambar 15. Pengaturan Header...21
Gambar 16. Penganturan Content...21
Gambar 17. Pengaturan Footer...21
Gambar 18. Pengaturan Menu...22
Gambar 19. Pengaturan Menu Sliding...23
Gambar 20. Pengaturan Logo...24
Gambar 21. Ukuran Dokumen Tombol Scroll Up...25
Gambar 22. Lingkaran Dasar Tombol...27
Gambar 23. Desain Tombol Scroll Up...27
Gambar 24. Menambah Tombol Scroll Up...28
Gambar 25. Pengaturan Tombol Scroll Up...28
Gambar 26. Tampilan Wow Slider...30
Gambar 27. Menambah Gambar Kedalam Wow Slider . 30 Gambar 28. Menu Efek Wow Slider ...31
Gambar 29. Memilih Menu Insert...32
Gambar 30. Memilih Halaman Untuk Disisipi Slide...32
Gambar 31. Menyisipkan Slide Ke Halaman...33
Gambar 32. Kode Sidebar...35
Gambar 33. Dokumen Baru di Adobe Photoshop CS6...36
Gambar 34. Memasukkan Gambar Ke Adobe Photo- shop CS6 ... 37
Gambar 35. Menampilkan Time Line...38
Gambar 36. Memilih Durasi Tiap Gambar...39
Gambar 37. Menambah Frame...40
Gambar 38. Memunculkan dan Menyembunyikan Layer 41 Gambar 39. Memilih Tipe Penyimpanan...42
Gambar 40. Pilihan Tipe Penyimpanan...43
Gambar 41. Kode Java Script Kalender...44
Gambar 42. Memasukkan Kode Kedalam Sidebar...45
Gambar 43. Pengaturan CSS Kalender...46
Gambar 44. Menambah Jejak Pendapat...47
Gambar 45. Pengaturan Jejak Pendapat...48
Gambar 46. Memberi Pengaturan Sidebar...49
Gambar 47. Menambahkan Artikel...50
DAFTAR TABEL
Tabel 1. Daftar Gambar ... 8
BAB I PENDAHULUAN
1.1 LATAR BELAKANG
dalam menjamin kestabilan ekonomi. Internet mampu berdaya guna dan bertepat guna, sebagai salah satu media bisnis dan komunikasi dengan sesama pebisnis, pelanggan dan calon pelanggan.Website adalah sebuah kumpulan halaman pada suatu domain di internet yang Ilmu pengetahuan dan teknologi selalu berkembang dan mengalami kemajuan dengan pesat. Salah satunya yang menjadi sorotan adalah perkembangan penggunaan internet yang saat ini semakin mempermudah hampir semua hal, termasuk pemasaran produk perindustrian. Dengan Internet, perekonomian bangsa dapat meningkat jika ditunjang dengan sistem ekonomi yang mapan.
Dengan sistem pemasaran yang mapan, memungkinkan kita lebih berpikir kritis, kreatif dan produktif dibuat dengan tujuan tertentu dan saling berhubungan serta dapat diakses secara luas melalui halaman depan (home page) menggunakan sebuah browser menggunakan URL website.
Website dapat digunakan sebagai sarana promosi produk untuk mewujudkan tujuan kemapanan ekonomi industri.
Toko laperpool yang beralamat di sungai kerupuk Kabupaten banyuasin berdiri sejak tahun 2019 oleh Susi Lawati selaku pendiri toko. Website Sebagai Sarana Jual Beli/eCommerce (Toko Online)
Apakah Anda pernah mendengar nama-nama situs belanja besar semacam Tokopedia, Bukalapak, atau website beli tiket transportasi Traveloka? Ini termasuk dalam aktivasi fungsi website sebagai ecommerce. Tujuan dari website seperti ini adalah mendapat customer yang bertransaksi, meningkatkan penjualan dan loyalitas customer terhadap brand perusahaan. Website- nya juga tidak hanya berisi konten-konten informatif saja tetapi juga dukungan fitur tertentu semacam payment gateway. Ada banyak sekali elemen website yang harus dioptimasi untuk mensukseskan sebuah ecommerce yaitu proses transaksi yang mudah dilakukan web visitor/pengunjung, tampilan atraktif website, produk yang populer, penawaran menarik, metode pembayaran produk yang bervariasi, dan desain yang mobile-friendly mengingat orang lebih banyak mengakses dari handphone.
Judul laporan ini sendiri sengaja dipilih karena sangat menarik perhatian Penulis untuk menjadikan toko laperpool semakin berkembang pesat setiap tahun nya dan menjadi toko yang memanfaatkan keuntungan dan kemudahan internet dengan penggunaan website dan sosial media.
Dengan pertimbangan yang telah penulis paparkan di atas maka penulis mengambil tugas akhir ini dengan judul “Desain Website Laperpool Menggunakan Adobe Dreamweaver CS6”.
11
12
1.2 TUJUAN DAN MANFAAT
Tujuan yang diharapkan dari tugas akhir ini adalah sebagai berikut:
1. Sebagai syarat untuk menyelesaikan proses pendidikan program Profesional 1 Tahun di LKP PalComTech opi mall.
2. Menerapkan kecanggihan dan kemudahan teknologi dan internet ke dalam dunia usaha.
3. Mengaplikasikan ilmu yang telah di dapat selama belajar di palcomtech terhadap dunia kerja secara langsung.
4. Untuk mengetahui bagaimana membuat desain website dengan mengunakan Adobe dreamweaver CS6.
Manfaat yang diharapkan dari tugas akhir ini adalah sebagai berikut:
1. Untuk menerapkan pengetahuan yang telah dipelajari selama 1 tahun di PalComTech opi mall.
2. Menambah Pengetahuan Masyarakat Tentang dunia Teknologi.
BAB II
ANALISA DAN PEMBAHASAN
3.1. PERSIAPAN PROJECT
Dalam pembuatan website diperlukan beberapa software yang tepat dan efektif dalam penggunaan dan keperluannya untuk membangun website tersebut, sehingga tidak menghambat pekerjaan dan memperlambat kinerja komputer/laptop. Dalam hal ini Penulis mempersiapkan beberapa software terlebih dahulu sebelum memulai project diantaranya :
a) Adobe Photoshop CS6 b) Adobe Dreamwaver CS6
c) Web Browser (Firefox dan Google Chrome)
Selain itu kita juga perlu menyiapkan gambar-gambar yang akan kita masukkan kedalam website kita, Berikut adalah gambar-gambar yang Penulis siapkan.
13
NO. GAMBA R
NAMA 1
Logo toko
2
Gambar header
3
Produk Mentah
4 Produk Jadi
5 Gambar Kondisi
Tempat Usaha
6 Produk Mentah
7 Produk Mentah
8 Produk Mentah
9 Produk Mentah
10 Produk Mentah
11
Produk Mentah
14
12
Produk Mentah
13
Produk Mentah
15
14 Produk Jadi
15 Produk Jadi
16
Produk Jadi
17
Produk Jadi
18
Gallery
19
Gallery
16
20
Gallery
21
Produk Jadi
17
18 3.2 PEMBAHASAN PROJECT
3.2.1 Membuat Kerangka Website
Hal pertama sebelum membangun website asli, yaitu membuat kerangka webnya terlebih dahulu menggunakan software Adobe Photoshop, dalam project ini sendiri Penulis menggunakan Adobe Photoshop CS6.
Langkah pertama yaitu membuka aplikasi Adobe Photoshop CS6 di computer. langkah – langkah berikut ini:
1. Klik tombol start pada window taskbar.
2. Klik menu all programs.
3. Pilih menu all programs.
4. Pilih Adobe Dreamweaver CS6.
5. Akan tampil jendela awal program Adobe Dreamweaver CS6.
Seperti gambar dibawah ini:
Adobe Photoshop CS6
Gambar Logo Adobe Photoshop CS6
Kemudian, apabila sudah diklik buka dan jalankan software Adobe Photoshop CS6 tersebut.
Membuka Aplikasi Adobe Photoshop CS6
jalankan program tersebut dengan langkah-langkah berikut ini : 1. Klik tombol start pada window taskbar.
2. Klik menu all programs 3. Pilih menu all programs 4. Plih Adobe Photoshop CS6
Setelah terbuka, Penulis mulai mengatur ukuran template website yang akan dibuat. Karena kerangka website di Adobe Photoshop CS6 ini hanyalah sementara, ukurannya tidak menjadi patokan untuk ukuran website
haslinya karena kerangka yang dibuat hanya digunakan untuk mempermudah penentuan desai yang diinginkan. Berkut ini contoh ukuran sementara yang Penulis buat.
PEMBAHASAN PROJECT
Dalam pembutan Desain web ini kita perlu tahu terlebih dahulu kerangka yang terdapat dalam website ,berikut ini kerangka yang harus ada dalam website :
1. Navigasi, berisi nama judul dari website tersebut yang terdapat secara singkat tentang objek yang akan dijadikan website.
2. Header, berisi beberapa komponen yang akan menjadi penyusun yang akan dibahas seperti menu Beranda, Profil, Kategori, Gallery, Pemesanan dan Kontak.
3. Isi, berisi tentang pokok pembahasan yang akan dibahas didalam website tersebut.
4. Gambar, berisi tentang gambar-gambar pembahasan mengenai produk
5. Footer, berisi tentang informasi tentang pembuat website atau tanggal pembuatan.
Seperti tabel dibawah ini:
Navigasi Header Isi
Gambar
Footer
Kerangka Dalam Pembuatan Website
Dalam pembuatan project ini memerlukan desain header, logo dan desain untuk setiap menu yang akan dibuat pada aplikasi Adobe Pho toshop CS6 terlebih dahulu.
Berikut ini langkah-langkah pembuatan desain header sebagai berikut:
1. Langkah pertama dalam membuat desain header yaitu buka aplikasi Adobe photoshop cs6 terlebih dahulu.
Menjalankan Aplikasi Adobe Photoshop CS6
2. Lalu atur ukuran kertas dengan cara klik Menu File dan pilih New. Setelah itu muncul menu ukuran lembar kerja dimana nama nya kita ketik header, kemudian width nya 1300 dan height 300.
Gambar Ukuran header
3. Lalu mulai mendesain header dengan memasukan gambar background dan setelah itu masukan logo toko tersebutke background.
Gambar header Website
4. Setelah selesai membuat desai gambar header pada pada photoshoop selanjutnya membuat template website.
5. Langkah pertama membuat kerangka website yang berisikan navigasi, header, isi, gambar dan footer.
6. Setelah selesai mendesain header di Adobe Photoshop CS6, simpanlah kerangka tersebut dalam bentuk JPEG.
7. Tips yang Penulis berikan saat melakukan penyimpanan kerangka website dalam bentuk JPEG, pilihlah kualitas yang paling tinggi agar tampilan gambar lebih baik. Kemudian simpan juga file dalam bentuk PSD atau file mentah, agar apabila sewaktu-waktu anda ingin merubah atau memodifikasi tampilan header bisa anda lakukan pada file mentah.
8. Membangun website di DreamWeaver CS6
9. Setelah desain template dari halaman awal sudah dibuat, langkah selanjutnya yaitu mulai membangun pondasi awal dari website menggunakan elemen-elemen dasar dari website seperti yang telah kita bahas sebelumnya yaitu dimulai dari bagian paling atas navigasi.
Kemudian Header,isi Lalu gambar dan bagian paling bawah dari website yaitu footer. Adapun langkahnya adalah sebagai berikut.
A. Halaman Beranda
1. Langkah pertama yang harus dilakukan untuk membangun sebuah website yaitu dengan cara membuka aplikasi dreamweaver dengan memilih menu html.
Menu Html
2. Berikut Kode HTML dan tampilan desain Layer sebelum di beri kode CSS yang digunakan untuk membangun layer. Layer Website terdiri dari navigasi Header, Slide, isi , gambar , dan Footer.
3.
Kode HTML Pembuatan Website
Tampilan Desain
3. menyimpan menu disebuah folder dengan memberikan nama indeks.html
File penyimpanan menu
4. Membuat halaman baru di adobe dreamweaver yang diberi nama style. css
membuat halaman css
Menu style.css 5. Lalu Menghubungkan halaman html ke halaman css
Agar kerangka website yang dibuat lebih menarik
Coding menghubungkan halaman html ke css
6. Membuat menu navigasi yang berisikan beranda, profil, galeri, produk, dan kontak. Dan menambahkan coding css pada halaman css
Coding membuat menu navigasi
Coding Halaman css untuk kerangka tampilan vavigasi
Hasil desain menu navigasi
7. Membuat menu header yang berlatar belakang gambar yang telah diedit di aplikasi adobe dreamwever (hasil gambar yang telah diedit dismpan didalam satu folder). Dengan ukuran lebar 1350 dan tinggi 300
Coding desain menu header
Halaman header
8. Membuat menu badan utama yang berisikan bslider yang isi nya berupa 3 gambar yang telah disimpan kedalam satu folder dan menambahkan coding css pada halaman css.
Coding menu slider pada halaman html
Coding menu slider pada halaman css
Tampilan menu slider
9. Membuat menu isi yang berisikan beberapa penjelasan mengenai toko, menu gambar yang berisikan gambar produk toko dan footer . dan ditambah dengan coding css pada halaman css
Coding menu isi, gambar, dan footer
Coding menu isi, gambar, dan footer pada halaman css
Tampilan menu isi, gambar dan footer
B. HALAMAN PROFIL
C. HALAMAN GALLERI
D. HALAMAN PRODUK
E. HALAMAN KONTAK
F. HALAMAN DETAIL PRODUK ( 18 PRODUK )
G. Menghubungkan halaman ke halaman lainnya menggunakan hyperlink
BAB III KESIMPULAN DAN SARAN 4.1 KESIMPULAN
Berdasarkan dari pengamatan Penulis, maka dapat disimpulkan sebagai berikut :
1. Dalam proses pembuatan website memerlukan lebih dari satu software untuk membuat
berbagai komponen-komponen website tersebut.
2. Website memerlukan pengaturan CSS untuk mendapatkan tampilan yang bagus dan variatif, sehingga dapat menarik perhatian pengunjung.
3. Membuat website diperlukan berbagai referensi untuk menjadi inspirasi pembuatan website.
4.2 SARAN
Saran yang dapat Penulis berikan untuk alternatif pengembangan dari project ini adalah : 1. Perbanyaklah referensi dalam membuat dan mengembangkan website, sehingga dapat
menghasilkan suatu hal yang baru dan unik pada website yang dibuat.
2. Jangan takut untuk mencoba suatu hal yang baru, jadikan sebagai tantangan pada diri sendiri sehingga nantinya website yang dibuat bukan website yang biasa-biasa saja.
3. Fokus terhadap target dan tujuan pembuatan website, sehingga maksud dan tujuan yang disampaikan dapat diterima dengan mudah oleh semua kalangan.
DAFTAR PUSTAKA
https://www.niagahoster.co.id/blog/pengertian-website/ \ https://www.dewaweb.com/blog/pengertian-website/
