Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara Render file HTML yang berisikan CSS dan Script Javascript ke NodeJs
Assalamu 'alaikum.. Permisi Agan2 dan Mastah2, saya ingin bertanya seputar NodeJs, jadi setelah saya melihat tutorial di SekolahKoding NodejS bagian basic NodeJs, saya melihat tutor render HTML ke NodeJs, saya coba pertama bisa tapi itu hanya file HTML murni (tidak ada style css, php, maupun Javascript) tapi setelah saya coba dengan file HTML yang berisikan javascript (Eksternal) dan CSS.., NodeJs hanya menampilkan isi dari HTML saja yang berupa isi dari tag <h1> Berikut tag NodeJs saya :
<script>
var data = require('http');
var file = require('fs')
var server = data.createServer(buatServer);
function buatServer(req, res){
res.writeHead(200, {'Content-Type':'text/html'})
file.readFile('./logic2.html', null, function(err, data){
if (err) {
res.writeHead(404);
res.write('Page Not Found')
}else{
res.write(data)
}
})
}
server.listen(2000, function(){
console.log('coba cek masuk')
})
</script>
dan ini adalah hasil dari HTML yang seharusnya :
dan ini adalah hasil dari NodeJs nya :
Mungkin Agan2 bisa memberikan penjelasan kepada saya
3 Jawaban:
Jawaban Terpilih
File css dan javascriptnya dari CDN atau local server juga? Kalau dari CDN mestinya bisa jalan. Kalau dari server agan juga ya mesti dibuat routesnya. Di nodejs server agan cuma punya 1 route dan mengarah ke /logic2.html dengan header content type text/html. Padahal untuk css ya mestinya text/css, javascript text/js.
Prinsipnya begini, ketika agan buka url yg diinginkan, node server bisa meresponse dengan benar yaitu mengirim file logic2.html ke browser agan. Setelah itu browser menjalankan html tersebut dan menemukan external file css dan js yang mesti di request juga ke server. Misalnya path ke css adalah '/style.css' dan path ke js adalah '/script.js'. Browser mengirim lagi 2 request ke server untuk mendapatkan file tersebut. Tapi karena agan cuma punya 1 route, yang terkirim ya file html itu lagi. Jadi content css dan jsnya ya berupa text logic2.html juga. Makanya style dan scriptnya ga jalan. Mesti dibuat unique route untuk masing2 request (dalam hal ini file).
Memang bukan pekerjaan yg mudah dan simple apalagi kalau punya banyak routes yg harus di handle. Karena itu muncul frameworks seperti express, hapi dll. Supaya proses routing di nodejs bisa lebih cepat dan mudah.
owh..., begitu gan. ane pikir kalo HTML sudah memanggil js ataupun css, otomatis sudah menjadi satu. Oke gan TrimaKasih Jawabannya... akan saya coba dulu (y)
fungsi buatServer nya jg kurang lengkap gan, di akhir kode harusnya ada
return res.end();
