Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Express
Code

Membangun Sebuah Website MVC Lengkap dengan ExpressJS

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam artikel ini kita akan membangun sebuah situs web lengkap dengan sisi klien menghadap ke depan, serta panel kontrol untuk mengelola konten situs. Seperti yang Anda tebak, versi kerja terakhir dari aplikasi ini berisi banyak file yang berbeda. Aku menulis tutorial ini langkah demi langkah, mengikuti proses pembangunan, tapi aku tidak termasuk setiap satu file, seperti yang akan membuat ini membaca yang sangat panjang dan membosankan. Namun, kode sumber tersedia di GitHub dan saya sangat menyarankan agar Anda melihat.


Pengenalan

Express adalah salah satu framework terbaik Node. Memiliki dukungan besar dan sekelompok fitur berguna. Ada banyak artikel besar di luar sana, yang mencakup semua dasar-dasar. Namun, kali ini saya ingin untuk menggali sedikit lebih dalam dan berbagi alur kerja untuk membuat situs web lengkap. Secara umum, artikel ini adalah tidak hanya untuk Express, tapi untuk menggunakannya dalam kombinasi dengan beberapa alat besar lainnya yang tersedia untuk pengembang Node.

Saya berasumsi bahwa Anda sudah familiar dengan Nodejs, telah terinstall pada sistem Anda dan bahwa Anda mungkin telah membangun beberapa aplikasi dengan itu.

Di jantung Express adalah Connect. Ini adalah kerangka middleware, yang datang dengan banyak hal-hal yang berguna. Jika Anda bertanya-tanya apa itu middleware, berikut adalah sebuah contoh cepat:

Middleware pada dasarnya adalah fungsi yang menerima request dan response objek dan fungsi next. Setiap middleware dapat memutuskan untuk merespons dengan menggunakan objek response atau meneruskan aliran ke fungsi berikutnya dengan memanggil callback next. Dalam contoh di atas, jika Anda menghapus panggilan metode next() di middleware kedua, string hello world tidak akan pernah dikirim ke browser. Secara umum, begitulah cara kerja Express. Ada beberapa middlewares standar, yang tentu saja, menghemat banyak waktu. Seperti misalnya, Body parser yang mem-parsing permintaan body dan mendukung aplikasi json, application/x-www-form-urlencoded dan multipart/form-data. Atau Cookie parser, yang mem-parsing cookie header dan saran populates req.cookies dengan objek mengetik dengan nama kuki.

Check benar-benar membungkus Connect dan menambahkan beberapa fungsi baru di sekitarnya. Seperti misalnya, routing logic, yang membuat prosesnya lebih lancar. Berikut adalah contoh menangani permintaan GET:


Setup

Ada dua cara untuk setup Express. Yang pertama adalah dengan menempatkannya di file package.json Anda dan menjalankan npm install (ada lelucon npm yang berarti no problem man :)).

Kerangka kode akan ditempatkan di node_modules dan Anda akan mampu membuat sebuah instance dari itu. Namun, saya lebih memilih opsi alternatif, dengan menggunakan alat baris perintah. Hanya menginstal Express secara global dengan npm install -g express. Dengan melakukan ini, Anda sekarang memiliki alat CLI baru. Misalnya jika Anda menjalankan:

Express akan membuat kerangka aplikasi dengan beberapa hal yang telah dikonfigurasi untuk Anda. Berikut adalah pilihan penggunaan untuk perintah express(1):

Seperti yang Anda lihat, ada beberapa pilihan yang tersedia, tapi bagi saya itu cukup. Biasanya saya menggunakan less sebagai CSS preprocessor dan hogan sebagai mesin template. Dalam contoh ini, kami juga memerlukan dukungan sesi, sehingga argumen --sessions memecahkan masalah itu. Ketika perintah di atas selesai, proyek kami terlihat seperti berikut:

Jika Anda memeriksa file package.json, Anda akan melihat bahwa semua dependensi yang kita perlu ditambahkan di sini. Meskipun mereka belum diinstal. Untuk melakukannya, hanya menjalankan npm install dan kemudian folder node_modules akan muncul.

Saya menyadari bahwa pendekatan di atas tidak selalu sesuai. Anda mungkin ingin menempatkan route handlers Anda dalam direktori yang lain atau sesuatu yang serupa. Tapi, seperti yang akan Anda lihat di beberapa bab berikutnya, saya akan membuat perubahan pada struktur yang sudah dihasilkan, yang cukup mudah dilakukan. Jadi Anda harus hanya memikirkan perintah express(1) sebagai boilerplate generator.


FastDelivery

Untuk tutorial ini, saya mendesain situs web sederhana dari perusahaan palsu bernama FastDelivery. Berikut adalah screenshot dari desain lengkap:

site

Pada akhir tutorial ini, kita akan memiliki sebuah aplikasi web lengkap, dengan kerja control panel. Idenya adalah untuk mengelola setiap bagian dari situs di daerah terlarang yang terpisah. Tata letak diciptakan di Photoshop dan diiris untuk file CSS(less) dan HTML(hogan). Sekarang, aku tidak akan mencakup proses mengiris, karena tidak subyek dari artikel ini, tetapi jika Anda memiliki pertanyaan mengenai hal ini, jangan ragu untuk bertanya. Setelah mengiris, kami memiliki berikut file dan struktur aplikasi:

Berikut adalah daftar elemen situs yang kita akan administrasi:

  • Home (banner di tengah-tengah - judul dan teks)
  • Blog (menambah, menghapus dan mengedit artikel)
  • Halaman Layanan
  • Halaman karier
  • Halaman kontak

Konfigurasi

Ada beberapa hal yang harus kita lakukan sebelum kita dapat mulai implementasinya dilapangan. Setup konfigurasi adalah salah satu dari mereka. Mari kita bayangkan bahwa situs kecil kami harus di deploy untuk tiga tempat yang berbeda - server lokal, sebuah pementasan server dan server produksi. Tentu saja pengaturan untuk setiap lingkungan berbeda dan kami harus menerapkan mekanisme yang cukup fleksibel. Seperti Anda ketahui, setiap node script dijalankan sebagai program konsol. Jadi, kita dapat dengan mudah mengirim argumen baris perintah yang akan menentukan lingkungan saat ini. Saya membungkus bagian itu dalam modul terpisah untuk menulis tes untuk itu nanti. Berikut adalah /config/index.js file:

Ada hanya dua pengaturan (untuk sekarang) - mode dan port. Seperti yang Anda duga, aplikasi menggunakan port yang berbeda untuk server yang berbeda. Itu sebabnya kita harus memperbarui entry point dari situs, di app.js.

Untuk beralih antar konfigurasi, cukup tambahkan environment di bagian akhir. Sebagai contoh:

Akan menghasilkan:

Sekarang kita memiliki semua pengaturan kami di satu tempat dan mereka mudah diatur.


Tes

Saya seorang penggemar besar dari TDD. Saya akan mencoba untuk menutupi semua kelas dasar yang digunakan di artikel ini. Tentu saja, memiliki tes untuk benar-benar semua akan membuat tulisan ini terlalu lama, tapi secara umum, itulah bagaimana Anda harus melanjutkan ketika membuat aplikasi Anda sendiri. Salah satu kerangka favorit saya untuk pengujian adalah jasmine. Tentu saja ini tersedia dalam npm registri:

Mari buat direktori tests yang akan mengadakan pengujian kami. Hal pertama yang akan kami periksa adalah setup konfigurasi kami. File spesifikasi harus diakhiri dengan. spec.js, sehingga file harus disebut config.spec.js.

Jalankan jasmine-node ./tests dan Anda harus melihat berikut:

Kali ini, saya menulis implementasi pertama dan tes kedua. Itu tidak persis TDD cara dalam melakukan sesuatu, tapi selama beberapa bab berikutnya aku akan melakukan yang sebaliknya.

Saya sangat merekomendasikan menghabiskan banyak waktu menulis tes. Tidak ada yang lebih baik daripada aplikasi yang sepenuhnya teruji.

Beberapa tahun yang lalu saya menyadari sesuatu yang sangat penting, yang dapat membantu Anda untuk menghasilkan program-program yang lebih baik. Setiap kali Anda mulai menulis kelas baru, modul baru, atau hanya sepotong baru logika, tanyakan pada diri sendiri:

Bagaimana saya dapat menguji ini?

Jawaban atas pertanyaan ini akan membantu Anda untuk kode lebih efisien, membuat API yang lebih baik, dan memasukkan semuanya ke dalam blok yang dipisahkan dengan baik. Anda tidak bisa menulis tes seperti spaghetti code. Sebagai contoh, dalam file konfigurasi di atas (/config/index.js) Aku menambahkan kemungkinan untuk mengirim mode di modul konstruktor. Anda mungkin bertanya-tanya, mengapa harus saya lakukan ketika gagasan utama adalah untuk mendapatkan modus dari argumen baris perintah? Hal ini sederhana... karena saya perlu untuk menguji itu. Mari kita bayangkan bahwa satu bulan kemudian saya perlu untuk memeriksa sesuatu dalam konfigurasi production, tetapi node skrip dijalankan dengan staging parameter. Saya tidak akan bisa membuat perubahan ini tanpa sedikit perbaikan. Bahwa satu sebelumnya sedikit langkah sekarang benar-benar mencegah masalah di masa depan.


Database

Karena kami sedang membangun sebuah situs web dinamis, kita perlu database untuk menyimpan data. Saya memilih menggunakan mongodb untuk tutorial ini. Mongo adalah dokumen NoSQL database. Petunjuk penginstalan dapat ditemukan di sini dan karena saya pengguna Windows, aku mengikuti instalasi Windows sebagai gantinya. Setelah Anda selesai dengan instalasi, menjalankan MongoDB daemon, yang secara default listen pada port 27017. Jadi, secara teori, kita harus dapat terhubung ke port ini dan berkomunikasi dengan mongodb server. Untuk melakukan ini dari node script, kita perlu mongodb modul/driver. Jika Anda download source file untuk tutorial ini, modul sudah ditambahkan dalam package.json file. Jika tidak, tambahkan "mongodb": "1.3.10" Anda dependensi dan menjalankan npm install.

Selanjutnya, kita akan menulis tes, yang memeriksa jika ada server mongodb berjalan. /tests/mongodb.spec.js file:

Callback dalam metode .connect mongodb klien menerima sebuah objek db. Kita akan menggunakannya nanti untuk mengelola data kami, yang berarti bahwa kita perlu akses ke dalam model kami. Itu bukanlah ide yang baik untuk membuat objek MongoClient baru setiap kali apabila kita harus membuat permintaan ke database. Itu sebabnya aku pindah menjalankan server Check di dalam callback fungsi connect:

Bahkan lebih baik, karena kami memiliki konfigurasi setup, itu akan menjadi ide yang baik untuk menempatkan host dan port mongodb di sana dan kemudian mengubah URL terhubung ke:

Perhatikan middleware dengan cermat: attachDB, yang saya tambahkan tepat sebelum panggilan ke fungsi http.createServer. Berkat tambahan kecil ini, kami akan mengisi properti .db objek permintaan. Kabar baiknya adalah bahwa kita dapat melampirkan beberapa fungsi selama definisi rute. Sebagai contoh:

Jadi dengan itu, Express memanggil attachDB sebelumnya untuk mencapai handler rute kami. Setelah ini terjadi, request objek akan memiliki properti .db dan kita dapat menggunakannya untuk mengakses database.


MVC

Kita semua tahu pola MVC. Pertanyaannya adalah bagaimana hal ini berlaku untuk Express. Lebih atau kurang, itu adalah masalah penafsiran. Dalam beberapa bab berikutnya akan membuat modul, yang bertindak sebagai model, view dan controller.

Model

Model adalah apa akan menangani data yang di aplikasi kita. Ini harus memiliki akses ke objek db, dikembalikan oleh MongoClient. Model kami juga harus memiliki sebuah metode untuk memperpanjang itu, karena kita ingin membuat berbagai jenis model. Sebagai contoh, kita mungkin ingin membuat BlogModel atau ContactsModel. Jadi kita perlu untuk menulis spesifikasi baru: /tests/base.model.spec.js, untuk menguji fitur dua model ini. Dan ingat, dengan mendefinisikan fungsi ini sebelum kita mulai pengkodean implementasi, kami dapat menjamin bahwa modul kami akan melakukan hanya apa yang kita inginkan itu harus dilakukan.

Alih-alih objek db nyata, saya memutuskan untuk melewati sebuah mockup objek. Itu karena kemudian, saya mungkin ingin menguji sesuatu yang spesifik, yang tergantung pada informasi yang datang dari database. Ini akan menjadi jauh lebih mudah untuk menentukan data ini secara manual.

Implementasi metode extend sedikit rumit, karena kita harus mengubah prototipe dari module.exports, tetapi masih tetap menjaga konstruktor asli. Untungnya, kami memiliki tes bagus yang sudah ditulis, yang membuktikan bahwa kode kita bekerja. Versi yang lolos di atas, terlihat seperti ini:

Di sini, ada dua metode helper. Setter untuk objek db dan getter untuk database collection kami.

View

View akan menampilkan informasi ke layar. Pada dasarnya, view adalah kelas yang akan mengirimkan respon ke browser. Express menyediakan cara singkat untuk melakukan hal ini:

Objek respon adalah wrapper, yang memiliki sebuah API yang bagus, yang membuat hidup kita lebih mudah. Namun, saya lebih suka membuat modul yang akan mengenkapsulasi fungsi ini. Direktori devault views akan diubah menjadi templates dan yang baru akan dibuat, yang akan menjadi host kelas tampilan Basis. Perubahan kecil ini sekarang mengharuskan perubahan lain. Kami harus memberitahukan Express bahwa file template kami sekarang ditempatkan di direktori lain:

Pertama, saya akan mendefinisikan apa yang saya butuhkan, menulis tes, dan setelah itu, menulis implementasi. Kami membutuhkan modul yang sesuai dengan aturan berikut:

  • Konstruktor yang harus menerima respon sebuah objek dan nama template.
  • Harus memiliki metode render yang menerima objek data.
  • Itu harus bisa di extend.

Anda mungkin bertanya-tanya mengapa saya memperpanjang kelas lihat. Bukankah itu hanya menyebut method response.render? Baik dalam praktek, ada kasus di mana Anda akan ingin untuk mengirim sebuah header yang berbeda atau mungkin memanipulasi objek response entah bagaimana. Seperti misalnya, melayani data JSON:

Daripada melakukan ini setiap waktu, itu akan menyenangkan untuk memiliki kelas HTMLView dan kelas JSONView. Atau bahkan kelas XMLView untuk mengirimkan data XML ke browser. Hal ini hanya lebih baik, jika Anda membangun sebuah website besar, untuk membungkus fungsionalitas tersebut bukan copy-paste kode yang sama berulang-ulang.

Berikut adalah spesifikasi untuk /views/Base.js:

Untuk menguji render, saya harus membuat mockup. Dalam kasus ini, saya membuat sebuah objek yang meniru Express respon objek. Dalam bagian kedua dari tes, saya membuat kelas View lain yang mewarisi dasar satu dan menerapkan metode render kustom. Di sini adalah kelas /views/Base.js.

Sekarang kami memiliki tiga spesifikasi dalam direktori tests kami dan jika Anda menjalankan jasmine-node ./tests hasilnya harus menjadi:

Controller

Ingat routes dan bagaimana mereka didefinisikan?

'/' setelah rute, yang dalam contoh di atas, adalah benar-benar controller. Hal ini hanya middleware fungsi yang menerima request, response dan next.

Di atas, adalah bagaimana controller Anda seharusnya, dalam konteks Express. Perintah express(1) membuat direktori bernama routes, tetapi dalam kasus kami, lebih baik kita berinama controllers, jadi saya mengubahnya untuk mencerminkan skema penamaan ini.

Karena kami tidak hanya sedang membangun sebuah aplikasi kecil yang mungil, akan bijaksana jika kita menciptakan kelas dasar, yang kita dapat extend. Jika kami merasa perlu untuk melewati beberapa jenis fungsi semua dari controller kami, kelas dasar ini akan menjadi tempat yang sempurna. Sekali lagi, aku akan menulis tes pertama, jadi mari kita tentukan apa yang kita butuhkan:

  • ini harus memiliki sebuah extend metode, yang menerima objek dan mengembalikan instance anak baru
  • contoh anak harus run metode, yang merupakan fungsi middleware lama
  • harus ada name properti, yang mengidentifikasi controller
  • kita harus mampu menciptakan objek independen, berdasarkan kelas

Jadi hanya beberapa hal untuk saat ini, tetapi kita dapat menambahkan lebih banyak fungsi kemudian. Tes akan terlihat seperti ini:

Dan di sini adalah penerapan /controllers/Base.js:

Tentu saja, setiap kelas anak harus mendefinisikan metode run sendiri, bersama dengan logikanya sendiri.


Situs web FastDelivery

Ok, kami memiliki serangkaian kelas yang bagus untuk arsitektur MVC kami dan kami telah membahas modul yang baru kami buat dengan tes. Sekarang kita siap untuk melanjutkan dengan situs, perusahaan palsu, FastDelivery. Mari kita bayangkan bahwa situs tersebut mempunyai dua bagian - sebuah front-end dan panel administrasi. Front-end akan digunakan untuk menampilkan informasi yang ditulis dalam database ke pengguna akhir. Admin panel akan digunakan untuk mengelola data tersebut. Mari kita mulai dengan panel admin (kontrol) kami.

Panel Kontrol

Pertama-tama, buat pengontrol sederhana yang akan berfungsi sebagai halaman administrasi. file /controllers/Admin.js:

Dengan menggunakan kelas dasar pra-tertulis untuk pengontrol dan tampilan kami, kami dapat dengan mudah membuat titik masuk untuk panel kontrol. Kelas View menerima nama file template. Menurut kode diatas, file harus disebut admin.js dan harus ditempatkan di /templates. Konten akan terlihat seperti ini:

(Untuk menjaga tutorial ini cukup pendek dan format yang mudah dibaca, aku tidak akan menunjukkan setiap template view. Saya sangat merekomendasikan bahwa Anda mengunduh source code dari GitHub.)

Sekarang untuk membuat controller terlihat, kita harus menambahkan rute untuk itu di app.js:

Perhatikan bahwa kami tidak mengirimkan metode Admin.run secara langsung sebagai middleware. Itu karena kami ingin menjaga konteks. Jika kita melakukan ini:

kata this dalam Admin akan menunjuk ke sesuatu yang lain.

Melindungi Panel Administrasi

Setiap halaman yang dimulai dengan /admin harus dilindungi. Untuk mencapai ini, kita akan menggunakan Express's middleware: Sessions. Itu hanya menempel obyek permintaan yang disebut session. Kita sekarang harus mengubah controller Admin kami untuk melakukan dua hal tambahan:

  • Itu harus memeriksa jika ada sesi yang tersedia. Jika tidak, kemudian tampilkan login form.
  • Itu harus menerima data yang dikirim oleh login form dan otorisasi pengguna jika username dan password cocok.

Berikut adalah sedikit fungsi helper kita dapat gunakan untuk mencapai hal ini:

Pertama, kita mendapatkan pernyataan yang mencoba untuk mengenali pengguna melalui sesi objek. Kedua, kami memeriksa jika form sudah disubmit. Jika demikian, data dari formulir tersedia di objek request.body yang dipenuhi oleh bodyParser middleware. Kemudian kami hanya memeriksa jika username dan password sesuai.

Dan sekarang di sini adalah run metode controller, yang menggunakan helper baru kami. Kami memeriksa jika pengguna berwenang, menampilkan baik panel kontrol itu sendiri, sebaliknya kita menampilkan halaman login:

Mengelola Konten

Seperti yang ditunjukkan di awal artikel ini kami punya banyak hal untuk administrasi. Untuk menyederhanakan proses, mari kita menjaga semua data dalam satu koleksi. Setiap record akan memiliki properti title, text, picture dan type. Properti type akan menentukan pemilik record. Misalnya, halaman kontak akan membutuhkan hanya satu record dengan type: 'contacts', sementara halaman Blog akan membutuhkan lebih banyak record. Jadi, kami membutuhkan tiga halaman baru untuk menambahkan, mengedit dan menampilkan record. Sebelum kita melompat ke dalam membuat template baru, styling, dan mengedit baru ke controller, kita harus menulis kelas model, yang berdiri di antara MongoDB server dan aplikasi kita dan tentu saja menyediakan API.

Model mengurus menghasilkan ID unik untuk setiap record. Kita akan perlu untuk memperbarui informasi kemudian hari.

Jika kita ingin menambahkan record baru untuk halaman Kontak kami, kami hanya dapat menggunakan:

Jadi, kita memiliki API yang bagus untuk mengelola data dalam mongodb collection kami. Sekarang kita siap untuk menulis UI untuk menggunakan fungsi ini. Untuk bagian ini, Admin controller akan perlu diganti cukup sedikit. Untuk menyederhanakan tugas saya memutuskan untuk menggabungkan daftar catatan ditambahkan dan formulir untuk menambah/mengedit mereka. Seperti yang Anda lihat pada gambar di bawah, bagian kiri halaman yang disediakan untuk daftar dan bagian kanan untuk form.

control-panel

Setelah semuanya pada satu halaman berarti bahwa kita harus fokus pada bagian yang membuat halaman atau untuk lebih spesifik, pada data yang kami mengirimkan ke template. Itu sebabnya saya membuat beberapa fungsi pembantu yang digabung, seperti:

Kelihatannya agak jelek, tetapi bekerja seperti yang saya inginkan. Helper pertama adalah metode del yang memeriksa parameter GET saat ini dan jika ia menemukan action=delete&id=[id dari catatan], ini akan menghapus data dari collection. Fungsi kedua disebut form dan bertanggung jawab terutama untuk menampilkan formulir di sisi kanan halaman. Ia memeriksa apakah form disubmit dan benar memperbarui atau membuat record dalam database. Pada akhirnya, list metode mengambil informasi dan mempersiapkan tabel HTML, yang kemudian dikirim ke template. Implementasi ketiga helper ini dapat ditemukan dalam source code untuk tutorial ini.

Di sini, aku sudah memutuskan untuk menunjukkan fungsi yang menangani file upload:

Jika file disampaikan, node script .files properti objek permintaan dipenuhi dengan data. Dalam kasus kami, kami memiliki elemen HTML berikut:

Ini berarti bahwa kita dapat mengakses data yang disampaikan melalui req.files.picture. Dalam potongan kode di atas, req.files.picture.path digunakan untuk mendapatkan konten mentah dari file. Kemudian, data yang sama ada tertulis dalam sebuah direktori baru dibuat dan pada akhir URL tepat yang dikembalikan. Semua operasi ini sinkron, tetapi itu adalah praktik yang baik untuk menggunakan versi asinkron readFileSync, mkdirSync dan writeFileSync.

Front-End

Kerja keras telah selesai. Panel administrasi bekerja dan kami memiliki kelas ContentModel, yang memberi kami akses ke informasi yang tersimpan dalam database. Apa yang harus kita lakukan sekarang, adalah untuk menulis kontroler front-end dan mengikat mereka dengan konten yang tersimpan.

Di sini adalah controller untuk Home page - /controllers/Home.js

Halaman rumah membutuhkan satu record dengan jenis home dan empat record dengan jenis blog. Setelah controller selesai, kita hanya perlu menambahkan rute untuk itu di app.js:

Sekali lagi, kami melampirkan objek db ke request. Hampir sama dengan alur kerja sebagai yang digunakan dalam administrasi panel.

Halaman lain untuk kami front-end (sisi klien) hampir identik, dalam bahwa mereka semua memiliki controller, yang mengambil data dengan menggunakan kelas model dan tentu saja rute didefinisikan. Ada dua situasi yang menarik yang saya ingin menjelaskan lebih rinci. Yang pertama adalah terkait dengan halaman blog. Itu harus dapat menunjukkan semua artikel, tetapi juga untuk menyajikan hanya satu. Jadi, kita harus mendaftar dua route:

Mereka berdua menggunakan kontroler sama: Blog, tetapi memanggilan dan menjalankan metode yang berbeda. Membayar perhatian ke /blog/:id string. Rute ini akan mencocokkan URL seperti /blog/4e3455635b4a6f6dccfaa1e50ee71f1cde75222b dan hash panjang akan tersedia di req.params.id. Dengan kata lain, kami dapat menentukan parameter dinamik. Dalam kasus kami, itu adalah ID dari record. Setelah kita memiliki informasi ini, kami mampu menciptakan halaman unik untuk setiap artikel.

Kedua bagian yang menarik adalah bagaimana saya membangun halaman layanan, karir, dan kontak. Hal ini jelas bahwa mereka menggunakan hanya satu record dari database. Jika kami harus membuat controller berbeda untuk setiap halaman maka kita harus copy/paste kode yang sama dan hanya mengubah type field. Ada cara yang lebih baik untuk mencapai hal ini meskipun, karena hanya satu controller, yang menerima type ini dalam menjalankan metode. Jadi di sini adalah rute:

Dan controller akan terlihat seperti ini:


Deployment

Mendeploy sebuah situs berbasis Express adalah benar-benar sama dengan mendeploy aplikasi Node.js lainnya:

  • File yang ditempatkan pada server.
  • Proses node harus dihentikan (jika itu berjalan).
  • npm install perintah harus berlari untuk menginstal dependensi baru (jika ada).
  • Script utama kemudian dapat dijalankan lagi.

Perlu diingat bahwa Node masih cukup muda, sehingga tidak semuanya mungkin bekerja seperti yang diharapkan, tetapi ada perbaikan yang dibuat sepanjang waktu. Sebagai contoh, forever menjamin bahwa program Nodejs Anda akan berjalan terus menerus. Anda dapat melakukan ini dengan menggunakan perintah berikut:

Ini adalah apa yang saya gunakan pada server saya juga. Ini adalah tool kecil yang bagus, tetapi hal ini memecahkan masalah besar. Jika Anda menjalankan aplikasi Anda dengan hanya node yourapp.js, setelah skrip keluar tanpa terduga, server akan turun. forever, cukup restart aplikasi.

Sekarang saya tidak seorang administrator sistem, tapi saya ingin berbagi pengalaman saya mengintegrasikan node apps dengan Apache atau Nginx, karena saya berpikir bahwa ini adalah entah bagaimana bagian dari alur kerja pengembangan.

Seperti Anda ketahui, Apache biasanya berjalan pada port 80, yang berarti bahwa jika Anda membuka http://localhost atau http://localhost:80 Anda akan melihat halaman yang dilayani oleh Apache server dan kemungkinan skrip simpul yang mendengarkan pada port lain. Jadi, Anda perlu menambahkan sebuah host virtual yang menerima permintaan dan mengirimkan mereka ke port yang tepat. Sebagai contoh, katakanlah bahwa aku ingin meng-host situs, bahwa kami baru saja dibangun, di server Apache lokal di bawah alamat expresscompletewebsite.dev. Hal pertama yang harus kita lakukan adalah untuk menambahkan domain kita ke hosts file.

Setelah itu, kita harus mengedit file di bawah direktori konfigurasi Apache httpd-vhosts.conf dan menambahkan

Server masih menerima permintaan pada port 80, tetapi meneruskannya ke port 3000, di mana node menggunakannya.

Nginx setup adalah banyak lebih mudah dan jujur, itu adalah pilihan yang lebih baik untuk hosting Nodejs berbasis aplikasi. Anda masih harus menambahkan nama domain di file hosts Anda. Setelah itu, cukup buat sebuah file baru di /sites-enabled direktori di bawah Nginx instalasi. Isi dari file akan terlihat seperti ini:

Perlu diingat bahwa Anda tidak dapat menjalankan Apache dan Nginx dengan setup host di atas. Itu adalah karena mereka kedua memerlukan port 80. Juga, Anda mungkin ingin melakukan sedikit penelitian tambahan tentang konfigurasi server yang lebih baik jika Anda berencana untuk menggunakan potongan kode di atas dalam lingkungan produksi. Seperti saya katakan, saya bukan ahli di bagian ini.


Kesimpulan

Express adalah kerangka kerja besar, yang akan memberikan titik awal yang baik untuk memulai membangun aplikasi Anda. Seperti yang Anda lihat, ini adalah masalah pilihan pada bagaimana Anda akan memperpanjang ini dan apa yang akan Anda gunakan untuk membangun dengan itu. Ini menyederhanakan tugas-tugas membosankan dengan menggunakan beberapa middlewares besar dan menyisakan bagian-bagian yang menyenangkan ke pengembang.

Source code

Source code untuk ini contoh situs yang kami bangun tersedia di GitHub - https://github.com/tutsplus/build-complete-website-expressjs. Jangan ragu untuk fork itu dan bermain dengan itu. Berikut adalah langkah-langkah untuk menjalankan situs.

  • Download source code
  • Buka app direktori
  • Jalankan npm install
  • Jalankan mongodb daemon
  • Jalankan node app.js
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.