Membangun website sederhana menggunakan tech stack nodejs, expressjs, mysql database dan html render menggunakan ejs(Embedded JavaScript templating) template engine untuk merender di sisi server. Show
contoh tutorial disini menggunakan studi kasus membangun website blog sederhana dan menggunakan frame css bootstrap. Install Nodejs dan MysqlDi post tutorial ini saya menggunakan sistem operasi Windows 10, bagi yang sama menggunakan Windows 10 dan masih belum menginstall nodejs bisa mengikuti Cara Install NodeJS di Windows . Untuk Mysql database menggunakan bundle dari XAMPP untuk lengkapanya bisa mengikuti Cara Install MySQL di Windows. Install Expressjs dan library lainnyaPastikan Nodejs dan 1 sudah bisa berjalan melalui CMD
Penjelasan:
Template Bootstrap 4Untuk template Bootstrap menggunakan template example bisa dilihat disini Example Bootstrap Template Blog atau kalian bisa langsung download dengan cara klik tombol example https://getbootstrap.com/docs/4.0/examples/ atau bisa klik disini bentuknya dalam zip kemudian diektrak dan ambil bagian folder blog di dalamnya. Struktur database MysqlStruktur databasenya yang digunakan hanya satu table yaitu post Membuat Database Untuk MongoDB
Create Table CREATE DATABASE `simple_crud`; 0kolomnya yang dibuat yaitu id, title, content, slug_id, dan created_at
Pengkodean Nodejs dan ExpressjsTest untuk persiapan menjalankan Nodejs dan mysqlisi pengkodean di 2 dalam tahap awal ini untuk mengetes apakah ExpressJS sudah berjalan tanpa error.
lalu jalankan perintah 3 di console anda yang sebelumnya menjalankan perintah instalasi library lanjut kita akses ke 4 maka jika tanpa error output akan seperti ini Koneksi Nodejs ke Mysqlberikut ini isi pengkodean melakukan koneksi dari nodejs ke mysql melakukan koneksi biasa tanpa menggunakan pooling
Penjelasan :
Menampilkan data blog di ejs template enginetemplate ejs bagian headdi bagian ini berisi pemanggilan CSS framework bootstrap versi 4
Template EJS bagian headerbagian ini untuk keperluan menampilkan beberapa Menu diantaranya Home, New Post, dan Update Post.
Template EJS bagian footerfooter ini hanya untuk opsional saja ditambahkan atau tidak tidak masalah
Membuat logic untuk template EJS dan ExpressJS di NodeJSBagian ini kita akan membangun function dengan logic menerima data dari request yang dikirim dari form html. bagian bagian terkait MySQL dan melakukan eksekusi query dari NodeJS ke MySQL server. Membuat function untuk EJS di NodeJS bagian homeBagian pengkodean NodeJS yang melakukan koneksi ke MySQL maka kita panggil terlebih dahulu ke NodeJS disini kita membuat file terpisah dengan nama file mysql.js
setelah melakukan pengkodean untuk bisa berkomunikasi dengan mysql maka selanjutnya kita menggunakan sebuah library express js untuk bisa diakses menggunakan protokol HTTP dan library EJS untuk mencetak logic javascript dan tag HTML supaya bisa diakses di browser. berikut ini potongan pengkodean awal CRUD kita yang akan dibuat: - Bagian function ExpressJS untuk bagian Home 0Penjelasan:
- Bagian function EJS untuk bagian Home 1Penjelasan:
- Membuat function Express JS Create Post di NodeJSdi proses insert data ke Mysql bagian post 2Penjelasan
Membuat template EJS Create Post di NodeJS 3Bagian function ExpressJS Read data MySQL di NodeJS 4Membuat template EJS Read di Post 5Penjelasan Bagian pengkodean proses Update Post di NodeJS 6Penjelasan
Bagian pengkodean EJS view Update Post di NodeJS 5Penjelasan:
function proses Delete Post di Nodejs 8penjelasan: 0 : merupakan query mysql untuk memerintahkan delete data di tabel post dengan pengkondisian 1 9Penjelasan:
Screenshot Simple CRUD : Tampilan HomeTampilan Create PostTampilan Update Postsource code ini bisa teman-teman lihat dan unduh atau clone di repository GitHub : https://github.com/SigitNurhanafi/simple_crud_expressjs |