Log Of Oyazhuryachna

Membuat Single Page Application dengan ReactJS

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 src
rm -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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.