Belajar membuat web dengan Express.js

hellooooo world πŸ™‚
fiuhhh galau, ga punya duit, jauh dari mana-mana…(ngelluh mele luh tong tong :p)
Ngajak nonton ya udah ( seriuss inih saya πŸ˜€ ) ehh tapi si mba nya gamau 😦 , kalo kata temen sih gini,
“elu har har.. udah tau ditolak mulu masih aje ngejar-ngejar”
“hahahaaaa…bukan kek gitu juga sih, atuh pikir gw mah namanya berusaha ya harus full πŸ˜€ (ngeles)
takutnya teh gini, giliran gw ga maksimal berusaha, ada omongan “baru segitu udah nyerah”
ya lagian juga sih hati ini masih seneng gituh πŸ˜€ hahahaaaaaa”.
“yaudin terserah lu, sakit yaa hati elu merana ya hati elu, galau yaa elu, yaa kalo mati juga elu :p ”
“njiirrrr…serem, yaudah elu aja yuk nonton ama gw”
“idihhh najis”
—-offline
“….”

Sekilas ajalah galau hari ini, kita seriusan dikit nyok. Kemaren udah nyoba express juga sih, itu yang tutorialnya ampe ber-part-part-an hehehee gitu kali nulisnya, itu kita pake generator jadi yaa ga’murni kayaknya. Nah kalo kali ini nih kita bikin yang murni jadi bukan model MVC kayak ditutorial kemarin, cara installnya hampir sama deh pokoknya.

Gimana?? udah jadi? gampangkan tutorialnya??
Hahahahaa belum ada yaa gataunya, maaf-maaf :D. Sok kita coba langkah-langkahnya :

1. Install express, mysql, base64encode.

$ express simple

   create : simple
   create : simple/package.json
   create : simple/app.js
   create : simple/public
   create : simple/public/stylesheets
   create : simple/public/stylesheets/style.css
   create : simple/routes
   create : simple/routes/index.js
   create : simple/routes/users.js
   create : simple/views
   create : simple/views/index.jade
   create : simple/views/layout.jade
   create : simple/views/error.jade
   create : simple/bin
   create : simple/bin/www
   create : simple/public/javascripts
   create : simple/public/images

   install dependencies:
     $ cd simple && npm install

   run the app:
     $ DEBUG=simple ./bin/www

$ cd simple && npm install
$ npm install mysql
$ npm install base64

2. Buka file app.js, tambah kode berikut dibaris paling akhir :

var server = app.listen(3000, function(){
var host = server.address().address
var port = server.address().port

console.log('app listening at' , host, port)
})

3. Test server, jalankan dengan :

$ node app.js

4. Buka browser, arahkan ke http://localhost:3000

5. Selanjutnya kita akan coba untuk menampilkan data dari database. Buat database baru di phpmyadmin, dan buat 1 tabel login, atau bisa kopi sql dibawah :

--
-- Table structure for table `login`
--

CREATE TABLE IF NOT EXISTS `login` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `status` tinyint(1) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `login`
--

INSERT INTO `login` (`id`, `username`, `password`, `status`) VALUES
(1, 'admin', 'admin', 1),
(2, 'hari', 'a9bcf1e4d7b95a22e2975c812d938889', 1);

6. Menampilkan data, buka app.js dan tambahkan beberapa baris kode berikut :

var admins = require('./routes/admins');

sebelum baris ini :

var app = express();

7. Sebelum kita tampilkan data dari database itu kita buat dulu file koneksi mysql-nya. Kopi baris kode berikut dan simpan dengan nama mysql.js di folder config(kalo belum ada buat dulu folder ini πŸ˜€ )

var mysql = require('mysql');

var connection = mysql.createConnection({
  host: 'localhost',
  user: 'username',
  password: 'password',
  database: 'nama_database'
})

module.exports = connection;

8. Okehh, file koneksi kita udah siap. Sekarang buat view-nya untuk menampilkan data tersebut. Ehh lupa deng kita buat file route-nya dulu baru file view-nya πŸ˜€ . Berikut kode untuk route-nya, simpan dengan nama admins(sesuai dengan langkah no 6) :

var express = require('express');
var conn = require('../config/mysql');//get mysql connection

var router = express.Router();

/* GET Data. */
router.get('/', function(req, res) {
  conn.query('select * from login', function(err, rows, fields){
    if(!err && (rows.length>0)){
      var pesan = "sukses";
    }else{
      var pesan = "gagal";
    }
    res.render('admins/index', { title: 'Daftar Pengguna' , rows: rows, pesan: pesan});
  })
});

9. Perhatikan langkah no 8 diatas, kita memanggil file koneksi tadi, terus kita render(untuk view-nya) itu nanti di file index dalam folder admins. Nah udah pahamkan?? :D, berarti kita buat file untuk menampilkan datanya itu di dalam folder views/admins(kalo belom ada buat dulu) dan filenya kita kasih nama index.jade, berikut kodenya :

extends ../layout

block content
  h1= title
  p Welcome to #{title}
  if pesan != 'sukses'
    p #{pesan}
    p Data tidak ada
  else
    p #{pesan}
    table(border="1", cellspacing="0", cellpadding="0")
      tr
        td(style="width: 20%") Username
        td(style="width: 50%") Password
        td(style="width: 20%") Status
      each row in rows
        tr
          td #{row.username}
          td #{row.password}
          td #{row.status}

10. Hasil kerennya kayak gini nih nanti
express-js

Advertisements
This entry was posted in node.js and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s