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

Membangun CMS: nodePress

by
Read Time:17 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Anda berhasil membuat filesystem Content Management System (CMS) flat dengan menggunakan Go. Langkah selanjutnya adalah mengambil ide yang sama dan membuat web server menggunakan Node.js. Saya akan menunjukkan cara memuat perpustakaan, membuat server, dan menjalankan server.

CMS ini akan menggunakan struktur data situs seperti yang tercantum pada tutorial pertama, Membangun CMS: Struktur dan Penataan. Oleh karena itu, unduh dan instal struktur dasar ini dalam sebuah direktori baru.

Mendapatkan Node dan Perpustakaan Node

Cara termudah untuk menginstal Node.js di Mac adalah dengan Homebrew. Jika Anda belum menginstal Homebrew, tutorial Pemahaman Homebrew: Manajer Paket Terbaik OS X akan menunjukkan caranya.

Untuk menginstal Node.js dengan Homebrew, ketik instruksi ini ke terminal:

Setelah selesai, Anda akan memiliki perintah node dan npm yang terinstal penuh pada Mac Anda. Untuk semua platform lainnya, ikuti petunjuk di situs web Node.js.

Hati-hati: Banyak manajer paket saat ini menginstal Node.js versi 0.10. Tutorial ini mengasumsikan bahwa Anda memiliki versi 5.3 atau yang lebih baru. Anda dapat memeriksa versi Anda dengan mengetikkan:

Perintah node menjalankan penerjemah JavaScript. Perintah npm adalah manajer paket untuk Node.js untuk menginstal perpustakaan baru, membuat proyek baru, dan menjalankan skrip untuk sebuah proyek. Ada banyak tutorial dan kursus bagus tentang Node.js dan NPM di Envato Tuts+.

Untuk menginstal perpustakaan untuk server web, Anda harus menjalankan perintah ini di program Terminal.app atau iTerm.app:

Express adalah platform pengembangan aplikasi web. Ini mirip dengan perpustakaan goWeb di Go. Handlebars adalah mesin template untuk membuat halaman. Moment adalah perpustakaan untuk bekerja dengan tanggal. Marked adalah konverter Markdown ke HTML yang hebat dalam JavaScript. Jade adalah bahasa singkatan HTML untuk membuat HTML dengan mudah. Morgan adalah sebuah perpustakaan middleware untuk Express yang menghasilkan Apache Standard Log Files.

Cara alternatif untuk menginstal perpustakaan-perpustakaannya adalah mengunduh file sumber untuk tutorial ini. Setelah mengunduh dan unzip, ketik ini di direktori utama:

Itu akan menginstal semua yang dibutuhkan untuk membuat proyek ini.

nodePress.js

Sekarang Anda bisa mulai membuat server. Di direktori teratas proyek, buat file bernama nodePress.js, buka di editor pilihan Anda, dan mulailah menambahkan kode berikut. Saya akan menjelaskan kode seperti yang dimasukkan ke dalam file.

Kode server dimulai dengan inisialisasi semua perpustakaan yang digunakan untuk membuat server. Perpustakaan yang tidak memiliki komentar dengan alamat web adalah perpustakaan Node.js internal.

Selanjutnya, saya mengatur semua variabel global dan konfigurasi perpustakaan. Penggunaan variabel global bukanlah praktik perancangan perangkat lunak terbaik, tapi itu berhasil dan membuat perkembangan dengan cepat.

Variabel parts adalah array hash yang berisi semua bagian halaman web. Setiap halaman mereferensikan isi variabel ini. Ini dimulai dengan isi file server.json yang terdapat di bagian atas direktori server.

Saya kemudian menggunakan informasi dari file server.json untuk membuat path lengkap ke direktori styles dan layouts yang digunakan untuk situs ini.

Tiga variabel kemudian diset ke nilai null: siteCSS, siteScripts, dan mainPage. Variabel global ini akan berisi semua konten halaman CSS, JavaScript, dan indeks utama. Ketiga item ini adalah item yang paling banyak diminta pada server web manapun. Oleh karena itu, simpan di memori akan menghemat waktu. Jika variabel Cache di file server.json adalah false, item ini bisa dibaca ulang dengan setiap permintaan.

Blok kode ini untuk mengonfigurasi perpustakaan Marked untuk menghasilkan HTML dari Markdown. Sebagian besar, saya menyalakan dukungan tabel dan smartlist.

Variabel parts selanjutnya dimuatkan dengan bagian-bagian dari direktori styles dan layout. Setiap file di direktori parts di dalam direktori site juga dimuat ke dalam variabel global parts. Nama file tanpa ekstensi adalah nama yang digunakan untuk menyimpan isi file. Nama-nama ini bisa diperluas di makro Handlebars.

Bagian kode selanjutnya mendefinisikan helper Handlebars yang saya tetapkan untuk digunakan di server web: save, date, dan cdate. Helper save memungkinkan pembuatan variabel di dalam halaman. Versi ini mendukung versi goPress dimana parameter memiliki nama dan nilai bersama yang dipisahkan oleh "|". Anda juga bisa menentukan save menggunakan dua parameter. Sebagai contoh:

Ini akan menghasilkan hasil yang sama. Saya lebih suka pendekatan kedua, tapi perpustakaan Handlebars di Go tidak mengizinkan lebih dari satu parameter.

Helper date dan cdate memformat tanggal saat ini (date) atau tanggal tertentu (cdate) sesuai dengan peraturan pemformatan perpustakaan moment.js. Helper cdate mengharapkan tanggal untuk di-render menjadi parameter pertama dan memiliki format ISO 8601.

Sekarang, kode membuat instance Express untuk mengkonfigurasi mesin server yang sebenarnya. Fungsi nodePress.use() mengatur perangkat lunak middleware. Middleware adalah kode yang dilayani pada setiap panggilan ke server. Di sini, saya membuat perpustakaan Morgan.js untuk membuat output log server yang tepat.

Bagian kode ini mendefinisikan semua rute yang dibutuhkan untuk mengimplementasikan server web. Semua rute menjalankan fungsi setBasicHeader() untuk mengatur nilai header yang tepat. Semua permintaan untuk jenis halaman akan membangkitkan fungsi page(), sementara semua permintaan untuk halaman post type akan membangkitkan fungsi posts().

Default untuk Content-Type adalah HTML. Oleh karena itu, untuk CSS, JavaScript, dan gambar, Content-Type secara eksplisit diatur ke nilai yang sesuai.

Anda juga dapat menentukan rute dengan kata kerja REST put, delete, dan post. Server sederhana ini hanya memanfaatkan kata kerja get.

Hal terakhir yang harus dilakukan sebelum menentukan berbagai fungsi yang digunakan adalah dengan memulai server. File server.json berisi nama DNS (di sini, ini adalah localhost) dan port untuk server. Setelah diurai, fungsi server listen() menggunakan nomor port untuk memulai server. Setelah port server terbuka, script mencatat alamat dan port untuk server.

Fungsi pertama yang didefinisikan adalah fungsi setBasicHeader(). Fungsi ini menetapkan header tanggapan untuk memberitahu browser agar meng-cache halaman selama satu bulan. Ini juga memberitahu browser bahwa server adalah server nodePress. Jika ada nilai header standar lainnya yang Anda inginkan, Anda akan menambahkannya di sini dengan fungsi response.append(). .

Fungsi page() mengirimkan template tata letak untuk halaman dan lokasi halaman pada server ke fungsi processPage().

Fungsi post() sama seperti fungsi page(), kecuali postingan tersebut memiliki lebih banyak item untuk mendefinisikan setiap posting. Dalam rangkaian server ini, sebuah posting berisi type, kategori, dan post aktual. Jenisnya adalah blogs atau news. Kategori adalah flatcms. Karena ini mewakili nama direktori, Anda dapat membuatnya sesuai keinginan Anda. Cocokkan penamaan dengan apa yang ada di sistem file Anda.

Fungsi processPage() mendapatkan tata letak dan path ke konten halaman yang akan di-render. Fungsi dimulai dengan membuat salinan lokal dari variabel parts global dan menambahkan hashtag "contents" dengan hasil pemanggilan fungsi figurePage(). Kemudian menetapkan nilai hash PageName ke nama halaman.

Fungsi ini kemudian mengkompilasi isi halaman ke template tata letak menggunakan Handlebars. Setelah itu, fungsi processShortCodes() akan memperluas semua shortcode yang didefinisikan pada halaman. Kemudian, mesin template Handlebars melewati kode sekali lagi. Kemudian browser menerima hasilnya.

Fungsi processShortCodes() mengambil isi halaman web sebagai string dan mencari semua shortcode. Shortcode adalah blok kode yang mirip dengan tag HTML. Contohnya adalah:

Kode ini memiliki shortcode untuk box di sekitar paragraf HTML. Dimana HTML menggunakan < dan >, shortcode menggunakan -[ dan ]-. Setelah namanya, sebuah string berisi argumen ke shortcode bisa atau tidak bisa ada disana.

Fungsi processShortCodes() menemukan shortcode, mendapatkan nama dan argumennya, menemukan akhirnya untuk mendapatkan isinya, memproses isi shortcode, mengeksekusi shortcode dengan argumen dan isinya, menambahkan hasilnya ke halaman yang telah selesai, dan mencari shortcode berikutnya di sisa bagian halaman lainnya. Perulangan dilakukan dengan memanggil fungsi secara rekursif.

Bagian berikut ini mendefinisikan struktur json shortcode yang mendefinisikan nama shortcode yang terkait dengan fungsinya. Semua fungsi shortcode menerima dua parameter: args dan inside. Args adalah segalanya setelah nama dan ruang dan sebelum penutupan tag. Inside adalah segala sesuatu yang terkandung dalam tag shortcode pembuka dan penutup. Fungsi ini dasar, namun Anda dapat membuat shortcode untuk melakukan apapun yang dapat Anda pikirkan dalam JavaScript.

Fungsi figurePage() menerima path lengkap ke halaman di server. Fungsi ini kemudian menguji agar menjadi halaman HTML, Markdown, atau Jade berdasarkan ekstensinya. Saya masih menggunakan .amber untuk Jade sejak itu adalah perpustakaan yang saya gunakan dengan server goPress. Semua konten Markdown dan Jade bisa diterjemahkan ke dalam HTML sebelum meneruskannya ke rutinitas pemanggilan. Karena prosesor Markdown menerjemahkan semua kutipan ke &quot;, saya menerjemahkannya kembali sebelum mengembalikannya.

Fungsi fileExists() adalah pengganti fungsi fs.exists() yang digunakan untuk menjadi bagian dari perpustakaan fs Node.js. Yang menggunakan fungsi fs.statSync() untuk mencoba mendapatkan status file. Jika terjadi kesalahan, sebuah false akan dikembalikan. Jika tidak, itu mengembalikan nilai true.

Fungsi terakhir adalah fungsi MergeRecursive(). Ini menyalin objek yang dikirimkan kedua ke objek yang dikirimkan pertama. Saya menggunakan ini untuk menyalin parts utama variabel global ke dalam salinan lokal sebelum menambahkan bagian khusus halaman.

Menjalankan Secara Lokal

Setelah menyimpan file, Anda dapat menjalankan server dengan:

Atau, Anda bisa menggunakan skrip npm yang ada di file package.json. Anda menjalankan skrip npm seperti ini:

Ini akan menjalankan skrip start yang ada di dalam file package.json.

nodePress Server Main PagenodePress Server Main PagenodePress Server Main Page
Halaman Utama Server nodePress

Arahkan browser web Anda ke http://localhost:8080 dan Anda akan melihat halaman di atas. Anda mungkin telah memperhatikan bahwa saya menambahkan lebih banyak kode uji ke halaman utama. Semua perubahan pada halaman ada di unduhan untuk tutorial ini. Mereka kebanyakan hanya beberapa tweak kecil untuk lebih menguji fungsi dan menyesuaikan perbedaan menggunakan perpustakaan yang berbeda. Perbedaan yang paling menonjol adalah bahwa perpustakaan Jade tidak menggunakan $ untuk memberi nama variabel sementara Amber menggunakannya.

Kesimpulan

Sekarang Anda memiliki filesystem CMS flat yang sama di Go dan Node.js. Ini hanya menggores permukaan dari apa yang bisa Anda bangun dengan platform ini. Bereksperimen dan cobalah sesuatu yang baru. Itu adalah bagian terbaik untuk membuat server web Anda sendiri.

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.