Setelah berhasil menginstall reactJS di Ubuntu 18.04, maka tutorial kali ini penulis lanjut dengan membuat sebuah Single Page Application (SPA), lalu apakah Single Page Application itu ? Single Page Application adalah salah satu jenis aplikasi web site dimana hanya ada satu halaman (index.html) yang meng-handle semua aktivitas yang terjadi dalam aplikasi tersebut. User tidak akan berpindah halaman browser ketika melakukan request seperti mengisi formulir, klik link, atau aksi lain yang membutuhkan data dari server seperti halnya ketika anda menggunakan aplikasi berbasis web yang dibangun oleh PHP, ASP atau JSP.
Sebagai gambaran perhatikan video demo Single Page Application Berikut yang nantinya akan kita buat pada artikel ini :
Untuk membuat nya berikut langkah-langkahnya :
1. Buat project react dengan nama project web_statis
create-react-app web_statis
2. Lakukan instalasi paket react-router-dom dengan perintah
sudo npm install react-router-dom
Hal ini perlu dilakukan karena pada script Main.js paket ini akan diimport jika tidak maka akan mengakibatkan error aplikasi.
3. Tunggu beberapa saat sampai project selesai, jika sudah masuklah ke direcktori web_statis
cd web_statis
4. Masuk ke folder src, dan hapus semua file
cd srcrm -R *
5. Masuk ke directori public
cd ../public
6. Hapus isi directori public
rm *
7. Buat file index.html di folder public
<!DOCTYPE html><html lang="en"> <head> <title>Personal Web Site</title> </head> <body> <div id="root"></div> </body></html>
8. Buat file index.js di folder src
import React from "react";import ReactDOM from "react-dom";import Main from "./Main";import "./style.css";ReactDOM.render( <Main/>, document.getElementById("root"));9. Buat file Main.js di folder src
import React, {Component} from "react";import {Route,NavLink,HashRouter} from "react-router-dom";import Home from "./Home";import Portofolio from "./Portofolio";import CuriculumVitae from "./CuriculumVitae";import ContactMe from "./ContactMe";class Main extends Component{ render(){ return( <HashRouter> <h1 className="Judul">Log of Oyazhuryachna</h1> <ul className="MenuAtas"> <li><NavLink to="/">Beranda</NavLink></li> <li><NavLink to="/portofolio">Portofolio</NavLink></li> <li><NavLink to="/curiculum">Curiculum Vitae</NavLink></li> <li><NavLink to="/contactme">Contact Me</NavLink></li> </ul> <div className="content"> <Route exact path="/" component={Home}/> <Route path="/Portofolio" component={Portofolio}/> <Route path="/Curiculum" component={CuriculumVitae}/> <Route path="/ContactMe" component={ContactMe}/> </div> </HashRouter> ) }}export default Main;10. Buat file style.css simpan di folder src
body{ background-color:rgb(12, 91, 165); padding: 20px; margin:0px; }.Judul{ color:white;}h1,h2,p, ul,li{ font-family: sans-serif;}ul.MenuAtas{ background-color: #23Ba91; padding: 15px;}ul.MenuAtas li{ display: inline; list-style-type: none; margin: 0;}ul.MenuAtas li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 20px;}.content { background-color: #FFFFFF; padding: 20px; min-height: 300px; line-height: 30px;}.content h2{ padding: 0px; margin: 0px;}.content li { margin-bottom: 10px;}input{ width:100%; padding: 5px 0 5px 5px; border-radius:0px; border:1px solid rgb(30, 180, 160);}textarea{ padding: 5px 0 5px 5px; border-radius:0px; width:100%; height: 100px; border:1px solid rgb(30, 180, 160);}button{ padding: 5px 0 5px 5px; width:150px; border-radius:0px; font-weight: bold; border:1px solid rgb(30, 180, 160);}11. Buat file Home.js simpan di directori src
import React, {Component} from "react";class Home extends Component{ render(){ return( <div> <h2>Selamat Datang</h2> <p>Selamat datang di <i>Personal Website</i> saya, <i>Personal Website</i> ini hanya menampilkan informasi seputar saya dan aktifitas saya. Untuk melihat seluruh artikel saya bisa dilihat di blog pribadi yang beralamat di <strong><a href="http://ozs.web.id" target="_blank" rel="noopener noreferrer">http://ozs.web.id</a></strong>.</p> <p>Untuk artikel lain selain posting tersebut dan semua publikasi yang sifatnya umum dan terbuka untuk di-download bisa dilihat di academia.edu dengan url <strong><a href="http://uniku.academia.edu/TeuWawuh" target="_blank" rel="noopener noreferrer">http://uniku.academia.edu/TeuWawuh</a></strong></p> <p>Sedangkan bagi anda yang lebih merasa nyaman belajar menggunakan video tutorial, bisa menggunakan channer saya di youtube dengan nama chanel <a href="https://www.youtube.com/channel/UCnII0DLeavFVSE70nV05xcw" target="_blank" rel="noopener noreferrer"><strong>Pojok Programmer</strong></a></p> <p>Best regards,<br/><br/><br/><strong>Oyazhuryachna</strong></p> </div> ); }}export default Home;12. Buat direktori images didalam direktori src, kemudian masukan gambar-gambar yang dibutuhkan.
13. Buat file Portofolio.js simpan di direktori src
Perhatikan baris 3, 4, dan 5 pada script dibawah ! Untuk menyisipkan gambar didalam ReactJS tidak bisa menggunakan tag img seperti pada html biasa namun gambar yang akan digunakan didefinsikan terlebih dahulu dalam sebuah konstanta, kemudian konstanta tersebut dipanggil saat gambar akan ditampilkan dengan mengapit nama konstanta dengan tanda kurung kurawal.
import React, {Component} from "react";const Perpustkaan = require('./images/perpustakaan_sma_3.jpeg');const SikaUniku = require('./images/uniku_sika.jpg');const SaisLogo = require('./images/Sais_Logo.png');class Portofolio extends Component{ render(){ return( <div> <h2>Portofolio</h2> <p>Berikut adalah Portofolio saya :</p> <ul> <li>Sistem Informasi Akademik Universitas Kuningan<br/> <img src={SikaUniku} alt="Sika Uniku"/> </li> <li>Aplikasi Perpustkaan Online SMA N 3 Kuningan<br/> <img src={Perpustkaan} alt="Perpustakaan SMA 3"/> </li> <li>Student Academik Information System MAN Ciawigebang<br/> <img src={SaisLogo} alt="SAIS MAN Ciawigebang"/></li> </ul> </div> ); }}export default Portofolio;14. Buat file CuriculumVitae.js simpan di direktori src
import React,{Component} from "react";class CuriculumVitae extends Component{ render(){ return( <div> <h2>Curiculum Vitae</h2> <p><strong>Nama Lengkap</strong><br/> Oyazhuryachna </p> <p><strong>Pendidikan Terakhir</strong><br/> Magister Komputer - Rekayasa Sistem Informasi </p> <p><strong>Skills</strong><br/> <ul type="circle"> <li>Html 5</li> <li>Bootstrap CSS Framework</li> <li>React Javascript Framework Library</li> <li>PHP</li> <li>MySQL Database</li> <li>Linux Operating System</li> </ul> </p> </div> ); }}export default CuriculumVitae;15. Membuat ContactMe.js simpan di direktori src
import React, {Component} from "react";class ContactMe extends Component{ render(){ return( <div> <h2>Contact Me</h2> <p>Jika anda membutuhkan bantuan, silahkan hubungi saya melalui form dibawah ini :</p> <form id="FormKontak"> <p>Nama Lengkap<br/> <input type="text" id="txtNama"/> </p> <p>Email<br/> <input type="text" id="txtMail"/> </p> <p>Pesan<br/> <textarea id="txtPesan"></textarea> </p> <p><button type="button" id="btnSimpan">Kirim</button></p> </form> </div> ); }}export default ContactMe;16. Jalankan aplikasi dengan perintah
npm start
JIka berhasil maka akan tampak seperti video pembuka diatas.
Post a Comment