Membuat WEBSITE Kedai Kopi RESPONSIVE dengan HTML, CSS & Javascript | Part 2 | NGOBAR#37
ฝัง
- เผยแพร่เมื่อ 29 เม.ย. 2023
- Melanjutkan kembali pembuatan website kedai kopi kita dengan menambahkan beberapa fitur / bagian seperti Search, Produk dan Shopping Cart
---
Download Code Kedai Kopi Part 1:
github.com/sandhikagalih/keda...
Aset Gambar:
unsplash.com/photos/QouiCn7u6kw
Link Penting:
feathericons.com/
Playlist Lengkap Website Kedai Kopi Kenangan Senja:
• Membuat Website Kedai ...
---
Chapters:
00:00 Intro
---
🔥 SUPPORT WPU 🔥
👕 Beli Hoodie & T-Shirt di WPU Official Store 👕
shopee.co.id/wpustore.id
👾 Gabung Server Discord WPU 👾
/ discord
- Donasi Channel WPU (OVO / GoPay / Dana / LinkAja)
saweria.co/sandhikagalih
karyakarsa.com/sandhikagalih
---
📢 FOLLOW SOCIAL MEDIA 📢
- / sandhikagalih
- tiktok.com/@sandhika.galih
- / sandhikagalih
- github.com/sandhikagalih
terimakasih dan #janganlupatitikkoma!
@sandhikagalih
59:49 Sedikit saran accesibility pak dhika dan teman teman, sebaiknya untuk elemen yang sifatnya toggle dan bukan navigasi gunakan element button dengan type button tidak disarankan menggunakan tag a, keunggulan lainnya adalah tidak butuh prevent default
The HTML element, with a valid href attribute, is formally defined as representing a hyperlink. That is, a link between one HTML document and another, or between one location inside an HTML document and another location inside the same document.
In fact, the interactive, underlined element has become so synonymous with web navigation that this expectation has become entrenched inside browsers, assistive technologies such as screen readers and in how people generally expect the internet to behave. In short, anchors should navigate.
The native user agent implementations of the and elements not only differ in how they look and how they act when activated, but also in how the user is expected to interact with them. Both are perfectly clickable when using a mouse, but keyboard users expect to activate on enter only and to activate on both enter and space.
github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md
sertai contoh bwang
trs yg bener pake tag apa bang?
@@user-wy6vx5pi3r terserah, preferensi
@@yukinoshita1321 contoh (misal seperti di video):
Mksih pak sandhika atas ilmunya, mulai dari html sampe nodejs aku ikutin, sampe sekarang alhamdullilah bisa nyari duit sendiri dari ilmu yg dikasih pak dika semoga jadi amal jariyah pak
Gan temenan yok
@@wahyuistiaputra ngikut wkwk
GABUNG CIRCLE PLEASE
Pak request untuk dilanjutkan,. tambahin feature CRUD dan dinamis (length product berdasarkan data yang ada pada database)
up
Mari like
Assalamualaikum Pak Sandhika Galih. Barakallah masyallah semoga menjadi berkah atas ilmu yang telah bpk ajarkan ke kami untuk belajar html dll, terutama bagi saya yang dimana background pendidikan saya bukan IT. Tapi berkat ilmu yang telah bpk shre melalui youtube dan tiktok allhamdulillah saya sudah sdkit bisa ya walau blm mahir pak, saya ucapkan banyak² terima kasih pak.🙏
Please pak sandhika bykn terus buat yg seperti ini. Ini berguna bgt buat ngasah lg sehabis liburan panjang 😅
Akhirnya, Hadir lagi yang Part 2-nya! Mantap Kak Sandhika Galih!
Mantap pak, banyak-banyak bikin project kayak gini atau project selain bikin website pak biar untuk yang pemula lebih paham lagi haha, mantap dah pokoknya👍👍
Kemarin abis kelar nonton part 1 eh lanjut lagi, mantap... Pak...
terniat dan terkeren serta terbaik dan terikhlas untuk mengshare ilmu ny, panutan emang pa dika ini sya jd bnyak fham gara" pa dika, terimkasih
Bang kalau detail produk (gmbar eye) d klik tp hasil yg kluar biar gk sama keterangan nya gmn caranya ya?
mkasi pak dhika atas ilmunya, akhirnya saya bisa buat website untuk pertama kalinya walaupun masih desainnya aja
Idolaku yg teruss membagi ilmunya trimaksih bang
Makasih pa sandhika saya berharap kelanjutan untuk backend nya pa agar selesai ngobar kita kali ini
wahhh,. akhirnya, kok lama kali upload nya pak,. ditunggu next part nya pak
banyak yang minta lanjut part 3 sampai back end nya pak..sekalian tutor di push lagi ke github pages nya 😁 sebelumnya makasih ilmu2 nya pak 🙏🙏
Selalu keren, terima kasih pak ❤🙏
Pak sandi part 3 nya ditunggu nihh 😁
Sumpah ini pas banget gw baru kelarin part 1 nya.
Otw lanjut dan explore pak hehe
makasih pak,ditunggu part 3nya
Mantap pak. Request tambahin fitur metode pembayarannya atau payment gateaway
ditunggu banget part 3 nya pak
pak sandhika, mau tanya dong. untuk perbedaan nya peletakan e.preventDefault pada bagian akhir code di dlm function dan di awal itu apa ya. apakah ada pengaruh nya?
mantap pak, thanks ilmunya
Terimakasih pak, atas videonya
Lanjut pak Sandi,..? Ke fungsionalnya,... Mantap
Pak Dhika usul buat konten ttg web programming progressive web app pak pakai php. Terserah mau mulai dari yg native atau yg pk framework juga boleh
Mantap... Sesuai harapan
REQUEST :
Bikin unit testing di ci 4 dong pak, nyari tutorial gak nemu yang bagus, bahas unit testing ci4 yang project udah dibuat, kebanyakan cuma contoh, gak yang project jadi bingung gimana ngetest controlernya
yng ditunggu ☝🏼
Mantap pak lanjutkan 👍
Ini yang ku tunggu tunggu pak
Maaf izin bertanya pak, apakah kalau kita mengikuti tutorial dari youtube dalam pembuatan website itu bisa di masukkan ke dalam portofolio kita? Terimakasih
keren pak dika, lanjut sampai backend pak
Makasih atas ilmunya pak sangat bermanfaat. Kalau boleh req tolong lamjutin untuk buat database atau ngejalanin fitur bagian kontak pak makasih🙏
Ini yang ditunggu tunggu 🔥
Mantap Pak lanjut pak untuk CRUD nya
Keren pak
Izin bertanya pak Dika, saya punya masalah pas bkin shopping cart. jdi kalo right = 0; dia bakal muncul tapi posisinya ga seperti menu side bar yang mentok ke atas. dia posisinya di bawah hero. Selain itu ketika right nya = -100% dia bakal sembunyi tapi bisa discroll. padahal kan kalo di menu side bar dia hilang sepenuhnya 53:10
Lanjut ke prat 3 pak Dika seru banget 😂
Mantap pak thank vidionya❤
ditunggu part selanjutnya pak
Terimakasih kak
sehat selalu pokoknya pak sandika
Akhirnya keluar juga terusanya
keren! sesuai ekspektasi!
Sehat selalu pak dosenn 😃
Keren banget ilmunya pak next project coba bikin website rental costume anime pak 😀😀😀😁😁😁😁😁😁😅😅
mantapp pakk🔥
Izin bertanya, kenapa pada bagian menu saya berurutan ke bawah ya, padahal di tutorial pak Dika berurutan ke samping
Mohon bantuannya 🙏
Ini Dia Yg Di Tunggu
Nongon ini ... Serasa kembali ke jaman kuliah 😂
Mantap pak
Mantap kak sandi
tolong dilanjutkan buat fitur shopping cart nya dong, makasih sebelumnya
permisi pak, minta bikinin tutorial untuk laravel 10, saya baru nyoba nyoba framework php ci4, sekarang saya pengen pindah ke laravel tapi versi yang terbarunya
Bapak mau tanya..kok disaya bagia. Icon cart nya pas di klik sidebarnya ngegantung di tengah² pak, tambahin apa ya pak?
Bang izin bertanya, klo mau membuat sistem admin buat mengelola data pembelian dari web html ini gimana caranya ya bang? Makasi banya bang sebelumnya🙏
Pak nanya...kenapa di products image .foto nya tidak mau sejajar secara paritikal) malah secara horizontal.
Sejajar nya ke bawa ..apa nya yang harus di cek
Pak, untuk search-form saya kok gak bisa tampil ya untuk penampilan di js tdk terbaca mohon bantuannya
makasii pak, kalau cara biar di shopping cart nya kaya ada jumlah harga gitu gmn ya pak?
Alhamdulillah guru ku sehat selalu, aku request fitur yg di klik tombol beli bisa langsung pesan
Bang saya request tambahin fitur kalau ada fotonya banyak sampai 30 lebih bisa di klik "gambar selanjutnya" atau di link kan ke halaman yg khusus gambar2 aja gitu dong
pak mohon bantuannya, untuk modal box nya lebih dri 1 produk gimana ya? klo di klik product 1 semua yang muncul, terima kasih pak 🙏
extension folder sama iconnya make apa pak? bagus tuh ada logo-logonya wkwk
lanjut ke backendnya pak dika pakai php atau pakai framwork laravel
pak mau tanya,kalo tombol x nya di search form gak muncul apa penyebabnya ya,mohon dijawab/teman" yang tau mohon bantuanya terima gaji
Izin bertanya pak , punya saya kok search-form nya gak bisa yah, padahal sudah ikutin dan sudah bener kodingnya , mhon pencerahan nya pak, terimakasih
Pak buat part 3nya pak gmna caranya buat shopping cart dan gmna caranya spya tombol search berfungsi
Pak sandika di menit 1:14:03 , kenapa hasilnya ketika di mobile phone " tulisan sama add to cartnya ngikutin", tapi jika dilaptop " tulisann sama add to cartnya di bawah jauh dari kotak putih". kenapa ya pak terima kasih
gimana carinya bang agar modal content kalau di klik sesuai dengan ulasan masing masing produk. aku belum ketemu ini, kalau di atas kan semua sama itu ulasan dan produknya
Kak tolong buat website top up games dong soalnya aku juga lgi buat web top up games hasil buat sendiri cuma masih bingung aja di bagian searching item nya di HTML item nya pake metode sama
Lanjut buat database
Kak buat fuangsionalitas nya kak saya penasaran kyk yg search dan keranjang belanjaan itu kak biar bisa di klik" gtu
Permisi pak dan para teman- teman izin bertanya kalo dibagian Java klik tombol ga muncul itu eror dmn ya terimakasih soalnya udah nyimak persis ga bisa bisa trs 🙏🙏
Bg cara nambahin metode pembayaran gimana bg misalnya nambahin payment nya tutorial nya dong bg
❤
Saya 😊❤ tutorial wpu
Izin pak Dhika, kok saya mengetik icon mata Nya. Malah balik ke menu Home ya??
Terimakasih
izin bertanya pak,di menit 25:40 saya coba di java scriptnya , saya menemukan ternyata untuk syntax "klik di luar elemen" itu komponen "if" nya cukup diwakili tombolnya saja sudah bisa jalan pak, contoh :
// Klik di luar elemen
const hm = document.querySelector('#hamburger-menu ');
const sb = document.querySelector('#search-button ');
document.addEventListener('click', function (e) {
if (!hm.contains(e.target) ) {
navbarNav.classList.remove('active');
}
if (!sb.contains(e.target) ) {
searchForm.classList.remove('active');
}
});
artinya jika klik diluar tombol (baik sb maupun hm) maka kontennya ( navbarnav dan searchformnya) akan dinonaktifkan, logika saya benar kan pak? saya baru belajar javascript soalnya
lanjutkan ke part 3 mas dika
Pak dika , ada bug pak , ketika shopping cart diisi banyak item nya contoh 10 item , gambar tidak bisa discroll kebawah ketika media laptop pak , mohon solusinya . terima kasih
untuk BE nya nnti pakao apa Pak?
Nah ini mantep pak, next nya bakal di tambahin alpine js gak nih pak🤭
ide bagus nih 😁
Haloo mass nya ngoding pakek notepad++ atau semacamnya
Mohon responnya
Izin bertanya pak, kenapa ya sewaktu sampek di bagian penambahan class active selalu gagal? padahal sudah saya cek dan sama. apakah versi dan jenis browser berpengaruh pak? (Saya memakai chrome) (edit) sama untuk feather code nya ga keluar kenapa ya pak? padahal untuk kode dan inisiasi sudah benar
Terimakasih
kak cara nambah kalkulator untek testimasi harga
BANG TOLONG BANG DI PART 1 BAGIAN NGASI JAVASCRIPT BUAT SIDEBAR NYA GAMAU2 MUNCUL PUTIHNYA BANG
lanjut pak part 3 nya
Selalu setia pakai Flexbox ❤
mulai belajar part 2nya
selesai dlm 2 minggu
Lanjut part 3. Untuk bagian "BELI SEKARANG DAN LOGO SOSMED"
agr logo sosmed yg diklik bisa langsung mengarah ke akun sosmednya
tinggal # nya diubah ke url akun sosmed masing masing mas
part 3nya pa dika mau bantu umkm di desa ku
👍
lanjut buat database nya dong pak
shalom, salam sehat selalu bang . aku mau nanya bang , selama aku ikut ngobar bareng abang ini, kendalaku slalu di javascript bang, selalu apa yang aku ikutin pnya abang gak konek sama punyaku , itu kenapa ya bang ? terimakasih bang. saya awam banget, lagi pngen belajarr
LANJUT BANG PLIS PENGEN BELAJARR
ijin bertanya pak..kan display products row awal nya grid itu posisi masih vertikal, tapi ketika product-icons display nya dikasih flex malah jadi horisontal posisi nya😥..mohon bantuan nya jika ada css yang perlu ditambahkan 🙏
default display flex tuh row bg, klo mau kebawah ditambahin flex-direction: column;
@@rexvaine5176 iya bg, udah solved..nuhun
pak tolong di revisi itu yg di bagian .products .product-card >>> harusnya .products .product-cart pak, jdi berantakan cssnya ,mengikutin pak. sama Produk Unggulan Kami
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus magni,
officia ducimus vitae architecto odio? di code css.stylenya di masukan jg di code yg menu pak .productsnya , saya lihat keskip di videonya pak biar ndak pada bingung pak yg ngikutin, ngoding bareng trims
Part 1 nya gak ada yaa?