Advertisement
  1. Code
  2. React

Membuat Aplikasi Blogging Menggunakan React, Bagian 6: Tag

Scroll to top
Read Time: 8 min
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 5: Profile Page

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Di bagian sebelumnya dari seri tutorial ini, Anda melihat bagaimana menerapkan fitur halaman profil untuk aplikasi blog React. Dalam tutorial ini, Anda akan melihat cara menerapkan tag untuk posting blog.

Persiapan

Mari kita mulai dengan mengkloning kode sumber dari bagian terakhir dari serial.

1
https://github.com/royagasthyan/ReactBlog-Profile

Setelah direktori dikloning, navigasikan ke direktori proyek dan instal dependensi yang diperlukan.

1
cd ReactBlogApp-Profile
2
npm install

Mulai server Node.js dan Anda akan memiliki aplikasi yang berjalan di http://localhost:7777/index.html#/.

Membuat Halaman Tag

Mari kita mulai dengan membuat tautan agar pengguna menambahkan tag ke database MongoDB. Di halaman index.html, tambahkan satu li lagi untuk halaman Add Tag.

1
<li role="presentation" id="tagHyperlink"><a href="/home#/addTag">Tag</a></li>

Ketika pengguna mengklik tautan Add Tag, itu akan menampilkan komponen React AddTag. Jadi mari tambahkan rute untuk komponen Add Tag di file home.jsx.

1
<Route component={AddTag} path="/addTag"></Route>

Berikut daftar rute lengkapnya:

1
ReactDOM.render(
2
    <Router history={hashHistory}>
3
        <Route component={ShowPost} path="/"></Route>

4
        <Route component={AddPost} path="/addPost(/:id)"></Route>

5
        <Route component={ShowProfile} path="/showProfile"></Route>

6
        <Route component={AddTag} path="/addTag"></Route>

7
    </Router>,

8
document.getElementById('app'));

Mari membuat komponen AddTag yang akan di-render saat pengguna mengklik tautan Add Tag.

1
class AddTag extends React.Component {
2
    constructor(props) {
3
      super(props);
4
    }
5
    
6
    componentDidMount(){
7
      document.getElementById('addHyperLink').className = "";
8
      document.getElementById('homeHyperlink').className = "";
9
      document.getElementById('profileHyperlink').className = "";
10
      document.getElementById('tagHyperlink').className = "active";
11
    }
12
    
13
    render() {
14
      return (
15
        <div className="col-md-5">
16
          <div className="form-area">  
17
              <form role="form">
18
                <br styles="clear:both" />
19
                <div className="form-group">
20
                  <input type="text" className="form-control" id="tag" name="tag" placeholder="Tag" required />
21
                </div>

22
                <div className="form-group">
23
                  <button type="button" id="submit" name="submit" className="btn btn-primary pull-right">Add Tag</button>

24
                </div>

25
              </form>

26
27
          </div>

28
        </div>

29
      )
30
    }
31
}

Seperti yang terlihat pada kode di atas, di dalam kelas komponen react AddTag, Anda telah membuat template HTML dasar untuk halaman tersebut. Di dalam metode componentDidMount Anda memiliki nama kelas untuk membuat hyperlink AddTag menjadi aktif.

Simpan perubahan di atas dan mulai ulang server. Sign in ke aplikasi dan klik tautan Add Tag, dan Anda akan dapat melihat laman Add Tag.

React Blog - Add Tag ViewReact Blog - Add Tag ViewReact Blog - Add Tag View

Menerapkan Fungsionalitas Add Tag

Tentukan variabel state untuk melacak perubahan tag.

1
constructor(props) {
2
  super(props);
3
  this.state = {
4
    tag:''
5
  };
6
}

Lampirkan variabel state tag ke elemen masukan dalam metode render.

1
<input value={this.state.tag} type="text" onChange={this.handleTagChange} className="form-control" id="tag" name="tag" placeholder="Tag" required />

Seperti yang terlihat pada kode di atas, Anda juga telah melampirkan event onChange ke masukan untuk melacak perubahan nilainya. Mengikat metode handleTagChange dari onChange di dalam constructor.

1
constructor(props) {
2
  super(props);
3
  this.handleTagChange = this.handleTagChange.bind(this);
4
  this.state = {
5
    tag:''
6
  };
7
}

Sekarang mari kita mendefinisikan metode handleTagChange di dalam komponen React AddTag.

1
handleTagChange(e){
2
  this.setState({tag:e.target.value})
3
}

Ketika pengguna mengklik tombol Add untuk menambahkan tag, Anda perlu menyimpan data. Jadi mari lampirkan event onClick ke tombol masukan.

1
<button type="button" onClick={this.addTag} id="submit" name="submit" className="btn btn-primary pull-right">Add Tag</button>

Mengikat metode addTag di dalam constructor komponen React dan menentukan metode untuk membuat panggilan API ke endpoint server Node.js.

1
constructor(props) {
2
  super(props);
3
  this.addTag = this.addTag.bind(this);
4
  this.handleTagChange = this.handleTagChange.bind(this);
5
  this.state = {
6
    tag:''
7
  };
8
}

Selanjutnya mari kita mendefinisikan metode addTag untuk membuat panggilan API ke endpoint /addtag.

1
addTag(){
2
3
  axios.post('/addtag', {
4
    tag: this.state.tag
5
  })
6
  .then(function (response) {
7
    console.log('reponse from add tag is ',response);
8
  })
9
  .catch(function (error) {
10
    console.log(error);
11
  });
12
}

Mari membuat endpoint API Node.js untuk /addTag. Di dalam file app.js, buat rute /addTag, yang akan mengurai data dan masukkan data ke dalam database MongoDB.

1
app.post('/addtag', function (req, res) {
2
  var tag = req.body.tag;
3
  post.addTag(tag,function(result){
4
    res.send(result);
5
  }); 
6
})

Di dalam endpoint /addTag, Anda telah membuat panggilan ke metode yang disebut addTag dari file post.js. Mari kita buat metode addTag di dalam file post.js. Berikut ini tampilnya:

1
addTag: function(tagName, callback){
2
  MongoClient.connect(url, function(err, db) {
3
	  	db.collection('tag').insertOne( {
4
			"name": tagName
5
		},function(err, result){
6
			assert.equal(err, null);
7
	    	console.log("Saved the tag details.");
8
	    	if(err == null){
9
	    		callback(true)
10
	    	}
11
	    	else{
12
	    		callback(false)
13
	    	}
14
		});
15
	});
16
}

Seperti yang terlihat pada kode di atas, Anda telah menggunakan MongoClient untuk terhubung ke database MongoDB. Anda telah memasukkan data tag ke koleksi yang disebut tag di dalam database. Setelah data dimasukkan tanpa kesalahan apa pun, Boolean true dikirimkan ke fungsi callback. Jika kesalahan ditemukan, sebuah Boolean false dikembalikan ke fungsi callback.

Simpan perubahan di atas dan mulai ulang server. Sign in ke aplikasi dan klik tautan Add Tag. Masukkan nama tag dan klik tombol Add. Periksa konsol browser dan Anda seharusnya dapat melihat pesan sukses yang dicatat di konsol browser.

Mengisi Tag pada Halaman Add Post

Setelah Anda menambahkan tag dari halaman Add Tag, tag harus diisi di halaman Add Post. Mari kita mulai dengan membuat metode yang disebut getTags di dalam file post.js yang akan terhubung ke database MongoDB dan mengambil tag. Berikut ini tampilnya:

1
getTag: function(callback){
2
	MongoClient.connect(url, function(err, db){
3
		 db.collection('tag', function (err, collection) {
4
	        collection.find().toArray(function (err, list) {
5
	            callback(list);
6
	        });
7
	     });
8
	})
9
}

Seperti yang terlihat pada kode di atas, Anda telah menggunakan MongoClient untuk terhubung ke database MongoDB. Setelah koleksi diambil, ia telah dikonversi ke array menggunakan metode toArray dan kemudian diteruskan ke fungsi callback.

Selanjutnya buat endpoint API Node.js yang akan memanggil metode getTag di atas di app.js.

1
app.post('/gettag', function (req, res) {
2
  post.getTag(function(result){
3
    res.send(result);
4
  });
5
})

Di file home.jsx di dalam komponen AddPost, buat metode yang disebut getTags yang akan membuat panggilan API /gettag dan mengambil daftar tag.

1
getTags(){
2
  var self = this;
3
  
4
  axios.post('/getTag', {
5
  })
6
  .then(function (response) {
7
    if(response){
8
      self.setState({tags:response.data}); 
9
    }
10
    
11
  })
12
  .catch(function (error) {
13
    console.log('error is ',error);
14
  });
15
16
}

Setelah data diambil dari API, atur data di dalam variabel status tags.

Di dalam metode render komponen React ShowPost, tambahkan elemen HTML select untuk mengikat variabel status tags. Berikut adalah tampilannya:

1
<div className="form-group">
2
  <label for="sel1">Select Tag:</label>
3
  
4
  <select className="form-control" >
5
  {
6
    this.state.tags.map(function(tag, i) {
7
      return (<option key={i} value={tag._id}>{tag.name}</option>)       
8
    }.bind(this))
9
  }
10
  </select>
11
</div>

Seperti yang terlihat pada kode di atas, Anda telah menggunakan metode map untuk memetakan variabel status tags ke elemen select.

Di dalam metode componentDidMount, lakukan panggilan ke metode getTags untuk memuat tag setelah komponen dipasang.

1
componentDidMount(){
2
    document.getElementById('addHyperLink').className = "active";
3
    document.getElementById('homeHyperlink').className = "";
4
    document.getElementById('profileHyperlink').className = "";
5
    document.getElementById('tagHyperlink').className = "";
6
    this.getPostWithId();
7
    this.getTags();
8
}

Simpan perubahan di atas dan mulai ulang server. Setelah Anda memuat halaman Add Post, Anda harus memiliki tag yang dimuat dalam elemen HTML select.

React Blog App - Category Loaded in Add Post PageReact Blog App - Category Loaded in Add Post PageReact Blog App - Category Loaded in Add Post Page

Mari tambahkan opsi default di drop-down dengan nilai 0.

1
<div className="form-group">
2
  <select className="form-control" value={this.state.tag} onChange={this.handleTagChange}>
3
  <option value="0">Select Tag</option>
4
  {
5
6
    this.state.tags.map(function(tag, i) {
7
      return (<option key={i} value={tag._id}>{tag.name}</option>)       
8
    }.bind(this))
9
  }
10
  </select>
11
</div>

Anda telah menambahkan event onChange ke elemen HTML select. Berikut adalah bagaimana event handleTagChange terlihat:

1
handleTagChange(e){
2
  this.setState({tag:e.target.value})
3
}

Setelah pengguna memilih tag, nilainya akan tersedia di variabel status tag.

Sertakan variabel tag dalam metode addPost di komponen React AddPost.

1
addPost(){
2
3
  axios.post('/addPost', {
4
    title: this.state.title,
5
    subject: this.state.subject,
6
    tag: this.state.tag,
7
    id: this.props.params.id
8
  })
9
  .then(function (response) {
10
    console.log('response from add post is ',response);
11
    hashHistory.push('/')
12
  })
13
  .catch(function (error) {
14
    console.log(error);
15
  });
16
}

Ubah endpoint API /addpost untuk menyertakan parameter tag.

1
app.post('/addpost', function (req, res) {
2
  var title = req.body.title;
3
  var subject = req.body.subject;
4
  var tag = req.body.tag;
5
  var id = req.body.id;
6
  console.log('id is ',id);
7
  if(id == '' || id == undefined){
8
    console.log('add');
9
    post.addPost(title, subject ,tag,function(result){
10
      res.send(result);
11
    }); 
12
  }
13
  else{
14
    console.log('update',title,subject);
15
    post.updatePost(id, title, subject ,tag,function(result){
16
      res.send(result);
17
    }); 
18
  }
19
  
20
})

Ubah metode addPost di file post.js untuk memasukkan parameter tag.

1
addPost: function(title, subject,tag, callback){
2
	MongoClient.connect(url, function(err, db) {
3
	  	db.collection('post').insertOne( {
4
			"title": title,
5
			"subject": subject,
6
			"tag": tag
7
		},function(err, result){
8
			assert.equal(err, null);
9
	    	console.log("Saved the blog post details.");
10
	    	if(err == null){
11
	    		callback(true)
12
	    	}
13
	    	else{
14
	    		callback(false)
15
	    	}
16
		});
17
	});
18
}

Ubah metode getPostWithId untuk mengatur drop-down ketika rincian posting diambil.

1
getPostWithId(){
2
  var id = this.props.params.id;
3
  
4
  var self = this;
5
  
6
  axios.post('/getPostWithId', {
7
    id: id
8
  })
9
  .then(function (response) {
10
    if(response){
11
      self.setState({title:response.data.title});
12
      self.setState({subject:response.data.subject});
13
      self.setState({tag:response.data.tag})  
14
    }
15
    
16
  })
17
  .catch(function (error) {
18
    console.log('error is ',error);
19
  });
20
21
}

Simpan perubahan di atas dan mulai ulang server. Sign in dan arahkan ke halaman Add Post dan tambahkan posting dengan tag yang dipilih. Anda akan memiliki posting baru yang disimpan dan terdaftar. Klik pada tombol edit untuk mengedit rincian dan tag dari posting.

Merangkum

Dalam tutorial ini Anda melihat cara menerapkan halaman menambahkan tag. Anda menambahkan field tag ke halaman tambahkan posting bersama dengan field judul dan subjek.

Semoga Anda menikmati seri tutorial ini. Beri tahu kami pendapat, saran, atau koreksi Anda di komentar di bawah.

Kode sumber dari tutorial ini tersedia di GitHub.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.