[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-belajar-nodejs-website":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},451,"belajar-nodejs-website","Belajar NodeJs - Membuat Website Sederhana Dengan Nodejs","Masih dilanjutan series belajar nodejs. Kali ini kita akan membuat sebuah website sederhana dengan HTML dan CSS, tapi kita memakai nodejs sebagai webservernya. Penasaran seperti apa hasilnya nanti? Ik",null,[],"2021-02-27T16:00:00Z","2026-07-14T04:39:40.720810Z","\u003Cp>Masih dilanjutan series belajar nodejs. Kali ini kita akan membuat sebuah website sederhana dengan HTML dan CSS, tapi kita memakai nodejs sebagai webservernya.\u003C\u002Fp>\u003Cp>Penasaran seperti apa hasilnya nanti?\u003C\u002Fp>\u003Cp>Ikuti terus tutorial ini ya.\u003C\u002Fp>\u003Ch4>Daftar Isi:\u003C\u002Fh4>\u003Ch2>Persiapkan package.json\u003C\u002Fh2>\u003Cp>Pertama buat sebuah folder dengan nama \u003Ccode>node-website\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>mkdir node-website\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Pergi ke dalam folder tersebut dan jalankan \u003Ccode>npm init\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>cd node-website\nnpm init\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Ikuti step-stepnya sampai selesai. Contohnya seperti di bawah ini.\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>npm init\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Jika sudah selesai, kita akan memiliki sebuah file package.json.\u003C\u002Fp>\u003Cp>Kita biarkan dulu package.json nya.\u003C\u002Fp>\u003Cp>Selanjutkan kita siapkan dulu content websitenya.\u003C\u002Fp>\u003Ch2>Persiapkan Content Website\u003C\u002Fh2>\u003Cp>Kita akan membuat sebuah halaman company profile yang isinya hanya website statis saja.\u003C\u002Fp>\u003Cp>Tampilannya kurang lebih akan seperti ini.\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Tampilan website statis\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Kalian bisa download source code untuk template ini di sini:\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fstartbootstrap.com\u002Fpreviews\u002Ffreelancer\">startbootstrap.com\u002Fpreviews\u002Ffreelancer\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Taruh file yang sudah kita download tadi dan taruh di dalam folder \u003Ccode>node-website\u003C\u002Fcode>\u003C\u002Fp>\u003Ch2>Buat webserver dengan Nodejs\u003C\u002Fh2>\u003Cp>Untuk membuat webserver di nodejs, kita buat dulu sebuah file dengan nama \u003Ccode>index.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kita sudah membahas cara membuat webserver di tutorial sebelumnya: Belajar NodeJs - Mengenal Package Management NPM\u003C\u002Fp>\u003Cp>Isi file \u003Ccode>index.js\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>var http = require('http');\nvar fs = require('fs');\nvar path = require('path');\nvar port = 8080\nhttp.createServer(function (request, response) {\n    console.log('request ', request.url);\n    var filePath = '.' + request.url;\n    if (filePath == '.\u002F') {\n        filePath = '.\u002Findex.html';\n    }\n    var extname = String(path.extname(filePath)).toLowerCase();\n    var mimeTypes = {\n        '.html': 'text\u002Fhtml',\n        '.js': 'text\u002Fjavascript',\n        '.css': 'text\u002Fcss',\n        '.json': 'application\u002Fjson',\n        '.png': 'image\u002Fpng',\n        '.jpg': 'image\u002Fjpg',\n        '.gif': 'image\u002Fgif',\n        '.svg': 'image\u002Fsvg+xml',\n        '.wav': 'audio\u002Fwav',\n        '.mp4': 'video\u002Fmp4',\n        '.woff': 'application\u002Ffont-woff',\n        '.ttf': 'application\u002Ffont-ttf',\n        '.eot': 'application\u002Fvnd.ms-fontobject',\n        '.otf': 'application\u002Ffont-otf',\n        '.wasm': 'application\u002Fwasm'\n    };\n    var contentType = mimeTypes[extname] || 'application\u002Foctet-stream';\n    fs.readFile(filePath, function(error, content) {\n        if (error) {\n            if(error.code == 'ENOENT') {\n                fs.readFile('.\u002F404.html', function(error, content) {\n                    response.writeHead(404, { 'Content-Type': 'text\u002Fhtml' });\n                    response.end(content, 'utf-8');\n                });\n            }\n            else {\n                response.writeHead(500);\n                response.end('Sorry, check with the site admin for error: '+error.code+' ..\\n');\n            }\n        }\n        else {\n            response.writeHead(200, { 'Content-Type': contentType });\n            response.end(content, 'utf-8');\n        }\n    });\n}).listen(port);\nconsole.log('Server running at http:\u002F\u002F127.0.0.1:'+port);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Bagaimana penjelasan file di atas?\u003C\u002Fp>\u003Cp>Oke kita akan bahas satu-persatu.\u003C\u002Fp>\u003Cp>Pertama kita butuh 3 module dari nodejs yaitu:\u003C\u002Fp>\u003Col>\u003Cli>module \u003Ccode>http\u003C\u002Fcode> : Berfungsi untuk membuat server http\u003C\u002Fli>\u003Cli>module \u003Ccode>fs\u003C\u002Fcode> : Module filesystem, berguna untuk membaca atau berinteraksi dengan file yang ada di dalam server\u003C\u002Fli>\u003Cli>module \u003Ccode>path\u003C\u002Fcode>: Module yang berfungsi untuk mendapatkan lokasi file dan folder\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Kedua, di line 6, kita membuat sebuah http server untuk menghandle request dan memberikan response.\u003C\u002Fp>\u003Cp>Di line 9, kita akan mencari file sesuai dengan url yang ada di browser nanti. Contohnya jika request urlnya \u003Ccode>\u002Fabout.html\u003C\u002Fcode> maka server akan mencari file about.html di dalam server.\u003C\u002Fp>\u003Cp>Di line 35, module \u003Ccode>fs\u003C\u002Fcode> akan mencari file sesuai dengan request url. Jika tidak ditemukan akan return error code sesuai yang dibutuhkan. Misalnya error 404 jika file memang tidak ada.\u003C\u002Fp>\u003Cp>Jadi itu proses singkatnya, bagaimana webserver kita akan berfungsi.\u003C\u002Fp>\u003Cp>Jika sudah, save file tersebut, kita akan lanjut membuat script di file \u003Ccode>package.json\u003C\u002Fcode> untuk memanggil perintah webserver.\u003C\u002Fp>\u003Ch2>Modifikasi Package.json\u003C\u002Fh2>\u003Cp>Buka file \u003Ccode>package.json\u003C\u002Fcode> dan tambahkan sebuah script baru dengan nama \u003Ccode>server\u003C\u002Fcode> atau bebas sesuai pilihan kalian.\u003C\u002Fp>\u003Cpre>\u003Ccode>....\n\"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"server\": \"node index.js\"\n},\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Edit bagian \u003Ccode>scripts\u003C\u002Fcode> dan tambahkan script baru dengan nama \u003Ccode>server\u003C\u002Fcode> yang isinya \u003Ccode>node index.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Sekarang buka terminal\u002Fcmd kalian lagi dan jalankan perintah berikut ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>npm run server\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Akan muncul tampilan seperti dibawah ini.\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Tampilan saat npm run server\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Buka url ini http:\u002F\u002Flocalhost:8080 browser kamu, dan website kita sudah siap digunakan.\u003C\u002Fp>\u003Ch2>Penutup\u003C\u002Fh2>\u003Cp>Itulah cara membuat webserver dengan nodejs untuk meng-serve website statis. Mudah bukan?\u003C\u002Fp>\u003Cp>Selanjutnya kita akan belajar bagaimana cara membaca form input dengan nodejs.\u003C\u002Fp>\u003Cp>Ikuti terus tutorial ini ya guys.\u003C\u002Fp>\u003Cp>\u003Cb>Series Belajar NodeJS Sebelumnya:\u003C\u002Fb>\u003C\u002Fp>\u003Col>\u003Cli>Belajar NodeJs - Dasar dan Persiapan Belajar NodeJs\u003C\u002Fli>\u003Cli>Belajar NodeJs - Mengenal Package Management NPM\u003C\u002Fli>\u003C\u002Fol>\u003Cp>\u003Cb>Series Belajar NodeJS Lainnya:\u003C\u002Fb>\u003C\u002Fp>\u003Col>\u003Cli>Belajar NodeJs - Cara Handle Form Input di Nodejs\u003C\u002Fli>\u003Cli>Belajar NodeJs - Membuat CRUD dengan NodeJs dan MySql\u003C\u002Fli>\u003C\u002Fol>","Masih dilanjutan series belajar nodejs. Kali ini kita akan membuat sebuah website sederhana dengan HTML dan CSS, tapi kita memakai nodejs sebagai webservernya. ",[],[],0]