Giter VIP home page Giter VIP logo

express-from-scratch's Introduction

Express from Scratch

Seperti yang sudah kita bicarakan di tantangan sebelumnya, ada dua cara untuk membuat sebuah project Express: cara manual atau gunakan generator. Kita sudah membuat project dengan bantuan express generator, kini saatnya kita membuat project dengan cara manual. Hal ini penting diketahui agar kita benar-benar mengetahui bagaimana framework ini bekerja.

Release 0: Generate from Scratch

Untuk membuat project secara manual, tambahkan paket express ke dalam folder kerja kita dengan menggunakan perintah:

npm install --save express

Release 1: Create some app

Untuk memulai membuat sebuah aplikasi express, kita perlu membuat sebuah file sebagai endpoint, sebagai contoh app.js.

Langkah paling awal untuk menggunakan framework Express adalah dengan cara memanggil library express dengan sintaks require.

Kemudian kita juga perlu membuat sebuah app variable untuk menampung segala macam konfigurasi dan hal lain terkait aplikasi kita. dan terakhir kita tinggal memanggil method listen untuk menjalankan web server sehingga aplikasi kita sudah dapat menerima request dan memberikan response. Dalam hal ini port yang kita gunakan adalah port 3000. Lihat contoh dibawah :

'use strict'

const express = require('express')

let app = express()

app.listen(3000)

Dan sekarang percaya atau tidak kita sudah memiliki aplikasi web yang berjalan di port 3000 dengan menjalankan perintah node server.js. Bukalah web browser dan ketikkan localhost:3000 di address bar dan aplikasi kita sudah berjalan dengan tanda sebuah error Cannot GET /.

Jangan khawatir, ini adalah error yang baik buat kita. Artinya express sudah berjalan dan express tidak menemukan route yang kita inginkan dan kita juga belum melakukan apa-apa di aplikasi express kita ya kan?

Release 2: Get something

Untuk membuat routes di express kita memiliki beberapa pilihan, yang akan paling sering digunakan diantaranya: GET, POST, DELETE, PUT.

Method GET dapat digunakan client untuk meminta sesuatu dari server kita. Di framework express, kita dapat membuat route get dengan cara seperti berikut.

'use strict'

var express = require('express')

var app = express()

app.get('/', function (req, res) {
  res.send("I love Hacktiv8!")
})

app.listen(3000)

Jangan lupa juga kita perlu memberikan response terhadap request yang masuk dari client dengan mendefinisikan fungsi callback.

Keluar dari node dengan menekan CTRL+C dan restart lagi server kita dengan mengetikkan node app.js.

Release 3: Move routes in a folder named 'routes'

Saat ini routes yang kita buat hanya 1, namun kita harus memikirkan untuk ke depannya, semakin berkembang suatu aplikasi, akan semakin banyak fitur yang bervariasi dan routes yang digunakan akan semakin banyak. Oleh karena itu, sebaiknya routes kita pisahkan dalam 1 folder terpisah.

Baca referensi

Buat sebuah folder bernama routes dengan file index.js di dalamnya. Pindahkan router yang sebelumnya ada di server.js ke dalam file tsb. Tambahkan beberapa konfigurasi sehingga ketika node app.js dijalankan, tetap menampilkan hasil spt release 2.

Release 4: Basic routing for User

Buatlah routing baru untuk User pada file baru di folder routes. Implementasikan routing yang sesuai dengan best practice di release 3. Buatlah sejumlah route berikut pada file tersebut dengan tema sekolahan.

Method Route Keterangan
GET / Menampilkan profile sekolahan yang akan kamu buat seperti halaman home jika kalian masuk ke web sekolahan
GET /student menampilkan form untuk menginput data student
POST /student menerima data form untuk add student
GET /teachers menampilkan data teachers dengan menggunakan table html

Pastikan setiap route memberikan respon yang unik sebagai penanda jika kita berhasil mengakses route tersebut. Bila kamu kesulitan silakan baca dokumentasi ExpressJs mengenai basic routing.

Release 5: Make it pretty with Interface

Yang kita lakukan sebelumnya adalah merespon dengan plain text. Kita dapat menggunakan templating engine yang sudah disediakan oleh Node.js via npm. Salah satu yang paling populer digunakan adalah pug (dulunya bernama jade). Namun di challenge ini kita akan menggunakan ejs.

Install paket ejs dan gunakan template engine tersebut di aplikasi express kita. Kembali ke dokumentasi untuk informasi lebih lanjut.

Buatlah halaman html sederhana untuk routing /, kamu bebas mengkreasikan halamanmu dengan menggunakan CSS dan Gambar untuk mempercantik website kalian

Resources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.