dari 0 sampai 100% Online - CARA MEMBUAT WEBSITE TOKO ONLINE dengan HTML, CSS, dan Javascript
Vložit
- čas přidán 21. 07. 2024
- Video ini, kita akan membuat website toko online sederhana dengan HTML, CSS, dan Javascript. Untuk CSS kita akan menggunakan Bootstrap, dan untuk Javascript kita akan menggunakan murni javascript tanpa menggunakan Framework.
🔰 Link Niagahoster: bit.ly/3H68QXH
✅ Kupon: dirumahrafif
LINK
==============================
- Link File Starter Todana : bit.ly/3WwvqOE
- Link Website hasil akhir : dirumahrafif.info/todana/
TIMELINE
==============================
00:00:00 Intro
00:01:24 Persiapan
00:06:34 Menambahkan CSS bootstrap
00:08:26 Menambahkan class container
00:11:54 Menambahkan logo dan menu
00:24:00 Membuat bagian banner
00:25:51 Membuat katalog produk
00:39:15 Membuat fitur responsive di bagian detail & harga
00:42:31 Menambahkan info tentang kami
00:46:49 Menambahkan info cara order
00:48:47 Menambahkan info copyright
00:49:47 Menambahkan scroll ke area
00:51:49 Memperbaiki lebar area tentang kami & cara order
00:52:53 Penjelasan alur mendapatkan data produk & menambah nama class
00:57:04 Menambahkan file javascript
00:58:56 Proses cek aksi lihat detail dengan javascript
01:03:29 Akses data gambar dengan javascript
01:07:36 Akses data harga dengan javascript
01:09:23 Akses info judul produk dengan javascript
01:10:50 Akses data deskripsi produk
01:15:19 Penjelasan modal di bootstrap untuk mengeluarkan modal & penyesuian untuk menampilkan data di modal
01:23:13 Membuat fungsi javascript untuk menampilkan data di bagian modal saat klik tombol detail & membuat proses kirim pesanan ke WhatsApp
01:34:41 Compress file menjadi zip
01:35:44 Penjelasan tentang Niagahoster
01:38:50 Upload file zip ke Niagahoster
FOLLOW SOCIAL MEDIA KAMI
==============================
▪️ github.com/dirumahrafif
PERALATAN YANG BIASA SAYA GUNAKAN
==============================
▪️ Mic Condensor Fifine K66GB
shope.ee/7UeeJDWhBy
DONASI UNTUK BERKEMBANG
==============================
▪️ saweria.co/dirumahrafif
⚡ Silakan LIKE dan SUBSCRIBE untuk konten gratis lainnya! ⚡
-- Pertanyaan? --
Silakan sampaikan pertanyaan sehingga semoga saya atau yang lainnya bisa membantu.
Pertanyaan, Informasi, silakan email di bawah ini
💌 Email: dirumahrafif@gmail.com
Terima kasih, - Věda a technologie
smoga saya lancar mengikuti tutor ini karna saya sedang menjalani skripsi membangun toko online😇
Trimakasih banyak mas, sudah membantu saya untuk mengenal lebih jauh web.
penjelasanya enak dan jelas bang, suaranya juga bagus mantab
Mantap bg. Next buat template sekolah
bagus tuan banya ini video macam buat juga
Sering sering pak bikin tutor website kaya gini🙏😄
Terima kasih bnyak bang ilmunya. Semoga menjadi amal jariyah.
Aamiinn.... 😊
Amiin
Kapan kapan kita buat playlist tentang javascript ya...,😍
yok akses ke sini...
czcams.com/play/PLzt0WdHR1Z3lOBtyKK8DEkxhl56GkvbKd.html
Setuju banget gw bg
Karena lu cuma ada playlist PHP sama mysql itu buat back end gw resep nya front end JavaScript 😁
gassss bang
gas
terimakasih ilmu nya pak 😁
berguna bangt bang buat tugas kuliah saya terimakasih bang ya
makasi banyak bang smoga lancar urusannya, videonya udh bantu projekku huhu
Alhamdulillah
Ini si lebih dari materi wktu kuliah dulu...😁 Thx mas. Semoga makin bnyak bikin tutor seperti ini 👍👍 dan channel nya semakin maju..
Semoga membantu ya
@@dirumahrafif Aminnn...🤲🤲 Swun yo mas 🙏
Wahh kok bisa sepemikiran pak...aku kebetulan lagi buat prohect kek gini persis kek gini
bisa dishare fiturnya apa saja Bang... siapatahu bisa ditambahi di fitur project saya ini.. ☺️🙏
aku tandai kau, aku like video ini aku tonton ini, karna saya baru pindah jurusan dari multimedia ke proggram dan mendadak mau skripsi lagi 😂😂😂, thanks tutornya👍👍👍👍
saya klik waktu inspect elemen console kom gak jadi ya?
mau nanya dong pak,itu bagian "Audit usage of navigator.userAgent, navigator.appVersion, and navigator. Platform"nya bermasalah giaman ya?
tuan bole buat video lagi js html css
kak, saat percobaan detail, setelah saya cek tetep buku 1 terus kak, padahal udah sama banget ngikut tutornya, kalau saya pencet detail untuk buku 2 gak bisa kak, tetep buku 1.
Terima kasih bang turtoialnya 😅
Kalau mau di sambungkan ke database bagaimana ya kak caranya?
bang, request membuat toko online dengan laravel. makasih bang
file saya kok error yak pas cek aksi javascript
di console,itu kenapa yak?
Izin bertanya mas, untuk ukuran piksel gambar, berapa ya? Karena punya saya kebesaran terus 🙏
Bng ini gw yg slh ngitung ap gmna itu yg ngecopy dri div class col itu kn butuh tiga abg di hitungan ke 2 udh blg 3
Maaf bg variabel gambar di css terdeklarasi namun gk ad nilai sarannya ap
Terimakasih banyak pak
maaf tanya kesalahan dari syntax javascriptnya apa, karena saya sudah ketik sesuai tapi hasilnya tidak sesuai
bang pas inspect pas di klik detail ko ga bisa ya mohon bantuannya
Coba html CSS js PHP mas trus pake api
Kak kok saya buka di notepad setelah di donlot, syntaxnya kosong ya? Kalau untuk image masih ad
kalo console kedip doang gk kelihatan gambar 1atau gambar 2 itu kenapa bang??
simple, tapi lebih bagus klo ada form nama, alamat, nomor hp sebelum dilarikan ke whatsapp. hanya saran🙏
Bang kenp pas pasang banner gak muncul gambar
penjelasannya udh bagus dann cukup di mengerti,cuma sayang aja karena mungkin ini website yg di buat terburu-buru jadi masih ada yg kurang pada bagian responsive di cara order dan juga tentang kami nya lalu tidak ada humburger menu untuk bagian navbar nya.but semua nya bagus,thanks mas udah mau berbagi ilmu.
siap Bang, makasih untuk masukannya
thank you buat infonya kak. saya sengaja baca komenan dulu sebelum nonton videonya.
kayanya kita masukin hamburger menu nya sendiri aja ya kak..
btw, thank juga untuk kak @dirumahafif untuk buatin web nya dan inspired..
kok bagian java script let gambar ngga bisa muncul di console ya
Mantap banf
Kak, pas download link untuk coding nya, kok ga ada isinya?
video nya bagus tapi waktu aku buat bagian tentang kami yang paragraf di bagian align kok gak bisa ya🙏
bang bikin versi laravel plis dengan datanya
makasih
bro itu gimana cara buat ke website instagram?
mass saya ketika masuk aksi detail klik kok ga muncul yaa aksinya:((
Semangat pak Rafif .... , Pak kemarin bootcamp sama pak Dhika , pa Eko dll , ga ikutan pak ?
nggak Bang, lokasi jauh...gak bisa hadir..
Makasih
pada saat inspect
let gambar = parent.querySelector('card-img-top').src;
kenapa tidak bisa dibaca ya srcnya
ada error' saat di console.log nya gak Kak?
Terima kasih Bang
toko online dengan laravel pak😋
Pak kalau klu bagian indexnya pake php untuk pemnggilan javascriptnya bagaimana ya pak ? Mohon bantuannya pak
tinggal file index.html diganti jadi index.php Bang, dan dijalankan dengan XAMPP atau laragon
Bang kalo nambah menu payment kaya dana ovo gopay dll, gimana yah? Jadi pembayaran langsung dari web nya, itu gimana yah bang
payment gateaway itu, bsa pake midtrans
pa mau nanya kenapa pas di klik beli masuk ke wa tapi, pesan yang keluar ga nge link ke gambar, pesannya muncul kayak ginih "Halo bang, saya mau pesan produk ini ${gambar}" ?
atau nulisnya pake tanda petik biasa Bang, bukan backthick
Bismilah semoga dijawab. Bang, waktu di tahap akhir pengkodingan yg di let pesan "saya mau pesan/(alamat gambar) buku1" punya saya malah muncul "saua mau pesan ${gambar}. Itu kenapa ya bang
nulisnya bukan pake petik Kak, tapi backtick
melayani jasa pembuatan website juga kak
pak kalau background warna abu2 nya ituu diganti warna ungu bisa nggak ya?? kalau bisa, bagaimana ya pak caranya? oiya sebelumnya terimakasih banyak pak vidionya sgt membantu saya untuk mengerjakan tugas kuliah😊🙏
sepertinya kalau warna ungu di bootstrap tidak ada, bisa diganti di bagian body.
Dari yang sebelumnya
menjadi
Kalo untuk tiap produk beda nomor itu gimana ya mas?
berarti dibuat data variabel beda di tiap produknya Bang, variabel nya berisi nomor hp
bang untuk cek console saya gak bisa karena code ini >${...}< gak berfungsi sama sekali tetep gak berubah warnanya atau fungsinya, gimana mas solusinya?
nulisnya sudah pakai backtick Bang?
@@dirumahrafif oh pake backtick aku salah lihat berati 😅,mksh mas penjelasannya 🙏, juga kontennya sangat jelas 👍
Mas belajar JavaScript nya secara otodidak/ bootcamp?
lihat tutorial Bang...
Boleh minta source code nya kak?🙏
javascript punya saya error
mau nanya mas,...klo buku 2 & 3 nya itu besar gmn ya
diatur pake css aja Bang, kalau pake ini, biar sesuai ukuran yang kita kehendaki
Untuk nambahin produknya jadi 50 produk gimana bg, buat tugas kuliah 🙏🏼
kalau ditambah langsung jadi banyak produknya bakal terlalu penuh Bang,
Bang kalau setiap produk beda nomor wa nya, bagaimana membuat nya?
hampir sama alurnya ketika buat deskripsi Bang, nomor hp disimpan di class yang tidak terlihat, nanti diambil datanya saat menampilkan detail Bang
@@dirumahrafif brrti bikin 1 class 1 no WhatsApp ya bg?
kak saya kok waktu inspect detail nya kok malah gambar: undefined ya?
saya juga , waduh mana udh nonton sejam lgi 😭ngestuck dsni jdi bingung, mohon penjelasannya pak 🙏
sama juga sih,abang udh bisa kah?kalo bisa mohon penjelesannya
bang ini menggunakan metode apa ya?
kok align="left" nya merah ya kyk gk berfungsi gmn ya mas solusinya?
ini di tag IMG ya Bang?
@@dirumahrafif iya bg tulisan align nya merah, solusinya gimana ya bg
tolong teman" kenapa saya ketika console keluarnya "undifided" 1:07:24
sudah bisa bang?
pnya saya align="left" nya merah knpa ya bg?
tapi ngaruh ndak Bang, kalau masih bisa berjalan code nya biarkan saja Bang
saya upload web ke hosting gratis kok gagal terus ya... padahal udah saya rubah database nama user dan password nya.. tolongin dong...hummmm
kalau ini tidk perlu database Bang, cuma masukin ke hostingan saja
@@dirumahrafif berarti kalau kita mau pakai database dengan web ini ga bisa bang?
pak mau tanya pada saat aku klik 'beli product ini' seharusnya dia langsung membuka tab baru ke link api whatsapp..tp kenapa pada saat klik tetap tidak ada perubahan ya..mohon arahan nya pak..mksh
coba klik tombol F12 Bang, ada peringatan tidak ya di console nya
@@dirumahrafif wait pak..aku coba dulu
udh aku coba pak..ga ada peringatan...
main.js:26 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': ',btnBeli' is not a valid selector.
at HTMLAnchorElement. (file:///C:/Users/Asus/Downloads/todana/javascript/main.js:26:18)
iya pak keluar perintah error..
Pengen buat pakai hp semoga berhasil😊
semoga berhasil ya Bang...kabari yak progressnya
ini pemogramannya pakai python ???
pake javascript Bang
@@dirumahrafif saya mau tanya kalau program website itu ada istilah housing itu maksudnya apa ??
Ternyata di akhir² ada yg berbayar 🥲
Menit brp bg
Kalau kasi source code jgn setengah2 omm 🥱🥱👍
di github saya sudah saya share juga Bang ☺️🙏