Setelah berhasil menyelesaikan materi untuk halaman admin, maka sekarang kita lanjutkan belajar dihalaman website depan. Seperti menampilkan data categories, places, sliders, maps dan lain-lain.
Pertama-tama kita akan membuat sebuah component untuk menampilkan header atau navbar dari website yang sedang kita kembangkan. Dimana header tersebut akan berisi beberapa informasi meliputi main menu, kolom pencarian dan button login.
Langkah 1 - Membuat Component Header Web
Silahkan buat folder baru dengan nama web di dalam folder
src/components dan di dalam folder web silahkan buat file
baru dengan nama Header.jsx, kemudian masukkan kode berikut ini di dalamnya.
//import react and hook
import React from "react";
//import component react bootstrap
import {
Navbar,
Container,
Nav,
NavDropdown,
} from 'react-bootstrap';
//import react router dom
import { Link } from "react-router-dom";
function WebHeader() {
return (
<React.Fragment>
<Navbar collapseOnSelect expand="lg" className="navbar-custom shadow-sm" fixed="top">
<Container>
<Navbar.Brand as={Link} to="/" className="fw-bold text-white"><i className="fa fa-map-marked-alt"></i> TRAVEL GIS</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<NavDropdown title={<span><i className="fa fa-list-ul"></i> CATEGORIES</span> } id="collasible-nav-dropdown" className="fw-bold text-white">
<NavDropdown.Divider />
<NavDropdown.Item as={Link} to="/posts/direction">LIHAT LAINNYA <i className="fa fa-long-arrow-alt-right"></i></NavDropdown.Item>
</NavDropdown>
<Nav.Link as={Link} to="/places" className="fw-bold text-white"><i className="fa fa-globe-asia"></i> PLACES</Nav.Link>
<Nav.Link as={Link} to="/maps" className="fw-bold text-white"><i className="fa fa-map"></i> MAPS</Nav.Link>
</Nav>
<Nav>
<Nav.Link className="fw-bold text-white me-4"><i className="fa fa-search"></i> SEARCH</Nav.Link>
<Link to="/admin/login" className="btn btn-md btn-light"><i className="fa fa-lock"></i> LOGIN</Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
}
export default WebHeader;
Dari penambahan kode di atas, pertama kita import React dari react.
//import react and hook
import React from "react";
Selanjutnya, kita import beberapa component dari React Bootstrap. Dimana component-component ini akan kita gunakan untuk membuat sebuah navbar dan dropdown.
//import component react bootstrap
import {
Navbar,
Container,
Nav,
NavDropdown,
} from 'react-bootstrap';
Kemudian kita import Provider Link dari React Router DOM.
//import react router dom
import { Link } from "react-router-dom";
Di dalam function component WebHeader kita buat konfigurasi untuk
navbar-nya, dimana kita akan menambahkan sebuah menu dan dropdown
menu. Kurang lebih seperti berikut ini contohnya.
<Nav className="me-auto">
<NavDropdown title={<span><i className="fa fa-list-ul"></i> CATEGORIES</span> } id="collasible-nav-dropdown" className="fw-bold text-white">
<NavDropdown.Divider />
<NavDropdown.Item as={Link} to="/posts/direction">LIHAT LAINNYA <i className="fa fa-long-arrow-alt-right"></i></NavDropdown.Item>
</NavDropdown>
<Nav.Link as={Link} to="/places" className="fw-bold text-white"><i className="fa fa-globe-asia"></i> PLACES</Nav.Link>
<Nav.Link as={Link} to="/maps" className="fw-bold text-white"><i className="fa fa-map"></i> MAPS</Nav.Link>
</Nav>
Langkah 2 - Membuat Component Footer Web
Setelah berhasil membuat component header, sekarang kita lanjutkan membuat
component untuk footer. Silahkan buat file baru dengan nama
Footer.jsx di dalam folder src/components/web, kemudian masukkan kode
berikut ini di dalamnya.
//import react
import React from 'react';
function WebFooter() {
return(
<React.Fragment>
<footer>
<div className="footer_top">
<div className="footer_bg">
<div className="footer_bg_one"></div>
<div className="footer_bg_two"></div>
</div>
</div>
</footer>
</React.Fragment>
)
}
export default WebFooter;
Dari penambahan kode di atas, kita hanya menambahkan beberapa HTML untuk component footer.
