first commit
This commit is contained in:
kicap1992
239
components/halaman/DataSet.js
Normal file
239
components/halaman/DataSet.js
Normal file
@ -0,0 +1,239 @@
|
||||
import classess from "./InputData.module.css";
|
||||
import Card from "../ui/Card";
|
||||
|
||||
function DataSet(props) {
|
||||
let status = props.data.status;
|
||||
let table_dataset,himpunan_fuzzy,url,table_rule_base,table_keanggotaan
|
||||
if (status == "error") {
|
||||
console.log("error")
|
||||
}else{
|
||||
console.log(props.data)
|
||||
let dataset = props.data.dataset;
|
||||
let rule_base = props.data.rule_base;
|
||||
let keanggotaan = props.data.keanggotaan;
|
||||
// create a variable table_dataset table from dataset where first column is id, second column is Usia("Minggu"), third column is Berat("gram"), fourth column is Keliling(cm), fifth column is Ukuran Batang(cm), sixth column is Jarak Duri(mm)
|
||||
table_dataset = dataset.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{index}</td>
|
||||
<td>{item.Usia}</td>
|
||||
<td>{item.Berat}</td>
|
||||
<td>{item.Keliling}</td>
|
||||
<td>{item.Ukuran_batang}</td>
|
||||
<td>{item.Jarak_duri}</td>
|
||||
<td>{item.Keterangan}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
himpunan_fuzzy = props.data.himpunan_fuzzy;
|
||||
url = "http://127.0.0.1:5000/";
|
||||
|
||||
table_rule_base = rule_base.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{item.No}</td>
|
||||
<td>{item.Rule}</td>
|
||||
<td>{item.Usia}</td>
|
||||
<td>{item.Berat}</td>
|
||||
<td>{item.Keliling}</td>
|
||||
<td>{item['Ukuran Batang']}</td>
|
||||
<td>{item['Jarak Duri']}</td>
|
||||
<td>{item.Keterangan}</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
|
||||
table_keanggotaan = keanggotaan.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{item.No}</td>
|
||||
<td>{item.Usia}</td>
|
||||
<td>{item.Berat}</td>
|
||||
<td>{item.Keliling}</td>
|
||||
<td>{item['Ukuran Batang']}</td>
|
||||
<td>{item['Jarak Duri']}</td>
|
||||
<td>{item['Variable Linguistic']}</td>
|
||||
<td>{item.Keterangan}</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<form className={classess.form} >
|
||||
<div className={classess.control}>
|
||||
<h2 htmlFor="title">DataSet</h2>
|
||||
<div id="div_dataset" >
|
||||
<table id="table_dataset" className={classess.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Usia <br /> ( <i>Minggu</i> )</th>
|
||||
<th>Berat <br /> ( <i>gram</i> )</th>
|
||||
<th>Keliling <br /> ( <i>cm</i> ) </th>
|
||||
<th>Ukuran Batang <br /> ( <i>cm</i> ) </th>
|
||||
<th>Jarak Duri <br /> ( <i>mm</i> ) </th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{table_dataset}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<hr />
|
||||
<div className={classess.control}>
|
||||
<h2 htmlFor="image">Semesta Pembicaraan</h2>
|
||||
<div id="div_himpunan_fuzzy" >
|
||||
<table id="table_himpunan_fuzzy" className={classess.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fungsi</th>
|
||||
<th>Nama Variabel</th>
|
||||
<th>Semesta Pembicaraan</th>
|
||||
<th>Himpunan Fuzzy</th>
|
||||
<th>Domain</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowSpan={10}>Input</td>
|
||||
<td rowSpan={2}>Usia <br /> <i>(Minggu)</i> </td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[0]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[0][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[0]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[1][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[1]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>Berat <br /> <i>(gram)</i></td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[2]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[2][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[2]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[3][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[3]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>Keliling <br /> <i>(cm)</i></td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[4]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[4][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[4]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[5][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[5]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>Ukuran Batang <br /> <i>(cm)</i></td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[6]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[6][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[6]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[7][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[7]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>Jarak Duri <br /> <i>(mm)</i></td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[8]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[8][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[8]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[9][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[9]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>Output</td>
|
||||
<td rowSpan={2}>Keterangan</td>
|
||||
<td rowSpan={2}> <b><i>{himpunan_fuzzy[10]['Semesta Pembicaraan']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[10][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[10]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b><i>{himpunan_fuzzy[11][' Himpunan Fuzzy']}</i></b> </td>
|
||||
<td> <b><i>{himpunan_fuzzy[11]['Domain']}</i></b> </td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br /><hr />
|
||||
<div className={classess.control}>
|
||||
<h2 htmlFor="address">Himpunan <i>Fuzzy</i></h2>
|
||||
<center><h3><i>Fuzzy</i> Usia</h3></center>
|
||||
<img src={url+"image/usia"} className={classess.image} />
|
||||
<center><h3><i>Fuzzy</i> Berat</h3></center>
|
||||
<img src={url+"image/berat"} className={classess.image} />
|
||||
<center><h3><i>Fuzzy</i> Keliling</h3></center>
|
||||
<img src={url+"image/keliling"} className={classess.image} />
|
||||
<center><h3><i>Fuzzy</i> Ukuran Batang</h3></center>
|
||||
<img src={url+"image/ukuran_batang"} className={classess.image} />
|
||||
<center><h3><i>Fuzzy</i> Jarak Duri</h3></center>
|
||||
<img src={url+"image/jarak_duri"} className={classess.image} />
|
||||
</div>
|
||||
<br /><hr />
|
||||
<div className={classess.control}>
|
||||
<h2 htmlFor="description">Rule Base</h2>
|
||||
<div id="div_rule_base" >
|
||||
<table className={classess.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Rule</th>
|
||||
<th>Usia</th>
|
||||
<th>Berat</th>
|
||||
<th>Keliling</th>
|
||||
<th>Ukuran Batang</th>
|
||||
<th>Jarak Duri</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{table_rule_base}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br /><hr />
|
||||
<div className={classess.control}>
|
||||
<h2 htmlFor="description">Keanggotaan Data</h2>
|
||||
<div id="div_keanggotaan" >
|
||||
<table className={classess.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Usia</th>
|
||||
<th>Berat</th>
|
||||
<th>Keliling</th>
|
||||
<th>Ukuran <br /> Batang</th>
|
||||
<th>Jarak <br /> Duri</th>
|
||||
<th>Variable <br />Linguistic</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{table_keanggotaan}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataSet;
|
||||
177
components/halaman/InputData.js
Normal file
177
components/halaman/InputData.js
Normal file
@ -0,0 +1,177 @@
|
||||
import { useRef, useState } from "react"; // use refs for reading value
|
||||
|
||||
import classess from "./InputData.module.css";
|
||||
import Card from "../ui/Card";
|
||||
|
||||
import { ToastContainer ,toast , Zoom , Bounce } from 'react-toastify'
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
|
||||
const MySwal = withReactContent(Swal)
|
||||
|
||||
function InputData(props) {
|
||||
let datanya = props.data;
|
||||
// console.log(datanya);
|
||||
|
||||
const usiaInputRef = useRef();
|
||||
const beratInputRef = useRef();
|
||||
const kelilingInputRef = useRef();
|
||||
const ukuranBatangInputRef = useRef();
|
||||
const jarakDuriInputRef = useRef();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function submitHandler(event) {
|
||||
event.preventDefault(); // ini untuk prevent reload atau submit default
|
||||
|
||||
const usia = usiaInputRef.current.value;
|
||||
const berat = beratInputRef.current.value;
|
||||
const keliling = kelilingInputRef.current.value;
|
||||
const ukuran_batang = ukuranBatangInputRef.current.value;
|
||||
const jarak_duri = jarakDuriInputRef.current.value;
|
||||
|
||||
|
||||
if(usia < datanya.detail_attribute.usia.min || usia > datanya.detail_attribute.usia.max-1){
|
||||
toast.warning("Usia harus diantara "+datanya.detail_attribute.usia.min+" - "+`${datanya.detail_attribute.usia.max-1}`)
|
||||
//focus back to input id=usia
|
||||
usiaInputRef.current.focus();
|
||||
}else if(berat < datanya.detail_attribute.berat.min || berat > datanya.detail_attribute.berat.max-50){
|
||||
toast.warning("Berat harus diantara "+datanya.detail_attribute.berat.min+" - "+`${datanya.detail_attribute.berat.max-50}`)
|
||||
//focus back to input id=berat
|
||||
beratInputRef.current.focus();
|
||||
}else if(keliling < datanya.detail_attribute.keliling.min || keliling > datanya.detail_attribute.keliling.max-1){
|
||||
toast.warning("Keliling harus diantara "+datanya.detail_attribute.keliling.min+" - "+`${datanya.detail_attribute.keliling.max-1}`)
|
||||
//focus back to input id=keliling
|
||||
kelilingInputRef.current.focus();
|
||||
}else if(ukuran_batang < datanya.detail_attribute.ukuran_batang.min || ukuran_batang > datanya.detail_attribute.ukuran_batang.max-0.5){
|
||||
toast.warning("Ukuran batang harus diantara "+datanya.detail_attribute.ukuran_batang.min+" - "+`${datanya.detail_attribute.ukuran_batang.max-0.5}`)
|
||||
//focus back to input id=ukuran_batang
|
||||
ukuranBatangInputRef.current.focus();
|
||||
}else if(jarak_duri < datanya.detail_attribute.jarak_duri.min || jarak_duri > datanya.detail_attribute.jarak_duri.max-0.5){
|
||||
toast.warning("Jarak duri harus diantara "+datanya.detail_attribute.jarak_duri.min+" - "+`${datanya.detail_attribute.jarak_duri.max-0.5}`)
|
||||
//focus back to input id=jarak_duri
|
||||
jarakDuriInputRef.current.focus();
|
||||
}
|
||||
else{
|
||||
const datanya = {
|
||||
usia: usia,
|
||||
berat: berat,
|
||||
keliling: keliling,
|
||||
ukuran_batang: ukuran_batang,
|
||||
jarak_duri: jarak_duri,
|
||||
};
|
||||
|
||||
// console.log(datanya);
|
||||
let formdata = new FormData();
|
||||
formdata.append("data", JSON.stringify(datanya));
|
||||
setLoading(true);
|
||||
try {
|
||||
//fetch api post
|
||||
const response = await fetch("http://127.0.0.1:5000/", {
|
||||
method: "POST",
|
||||
body: formdata,
|
||||
})
|
||||
const responseData = await response.json();
|
||||
|
||||
if(response.status === 200){
|
||||
console.log(responseData);
|
||||
await MySwal.fire({
|
||||
title: `<strong>${responseData.ket}</strong>`,
|
||||
html: <i>Hasil yang diinput adalah <b>{responseData.ket}</b> </i>,
|
||||
icon: 'success',
|
||||
showConfirmButton: false,
|
||||
})
|
||||
|
||||
}else{
|
||||
// create swal with 2 button ok and load , if ok is click then console.log("ok") else if load is click then console.log("load")
|
||||
await MySwal.fire({
|
||||
title: <strong>Gagal</strong>,
|
||||
html: <i>Server Bermasalah </i>,
|
||||
icon: 'error',
|
||||
showConfirmButton: true,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: 'Reload Page',
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
await MySwal.fire({
|
||||
title: <strong>Gagal</strong>,
|
||||
html: <i>Server Bermasalah </i>,
|
||||
icon: 'error',
|
||||
showConfirmButton: true,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: 'Reload Page',
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
}
|
||||
// props.onAddMeetup(meetupData)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// create function oninput only accept number and .
|
||||
function onInput(event) {
|
||||
const value = event.target.value;
|
||||
const regex = /^[0-9.]+$/;
|
||||
if (!regex.test(value)) {
|
||||
event.target.value = value.slice(0, -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<Card>
|
||||
<ToastContainer draggable={false} transition={Zoom} autoClose={2000} />
|
||||
<Backdrop open={loading}><CircularProgress color="inherit" /></Backdrop>
|
||||
<form className={classess.form} onSubmit={submitHandler}>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="title">Usia <i>(Minggu)</i> </label>
|
||||
<input type="text" required id="usia" ref={usiaInputRef} placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.usia.min} - ${datanya.detail_attribute.usia.max-1} max` } onInput={onInput} minLength="1" maxLength="4" />
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="image">Berat <i>(Gram)</i> </label>
|
||||
<input type="text" required id="berat" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.berat.min} - ${datanya.detail_attribute.berat.max-50} max` } ref={beratInputRef} onInput={onInput} minLength="3" maxLength="5" />
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="address">Keliling Buah <i>(cm)</i> </label>
|
||||
<input type="text" required id="keliling" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.keliling.min} - ${datanya.detail_attribute.keliling.max-1} max` } ref={kelilingInputRef} onInput={onInput} minLength="2" maxLength="4"/>
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="description">Ukuran Batang <i>(cm)</i></label>
|
||||
<input type="text" required id="ukuran_batang" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.ukuran_batang.min} - ${datanya.detail_attribute.ukuran_batang.max-0.5} max` } ref={ukuranBatangInputRef} onInput={onInput} minLength="1" maxLength="3"/>
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="description">Jarak Duri <i>(mm)</i></label>
|
||||
<input type="text" required id="jarak_duri" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.jarak_duri.min} - ${datanya.detail_attribute.jarak_duri.max-0.5} max` } ref={jarakDuriInputRef} onInput={onInput} minLength="1" maxLength="4"/>
|
||||
</div>
|
||||
<div className={classess.actions} >
|
||||
<button>Cek Kematangan</button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default InputData;
|
||||
91
components/halaman/InputData.module.css
Normal file
91
components/halaman/InputData.module.css
Normal file
@ -0,0 +1,91 @@
|
||||
.form {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-bottom: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.control label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.control input,
|
||||
.control textarea {
|
||||
display: block;
|
||||
font: inherit;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
background-color: #77002e;
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: 1px solid #77002e;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.actions button:hover,
|
||||
.actions button:active {
|
||||
background-color: #a50e48;
|
||||
border-color: #a50e48;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.table1 {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ini {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
border: 0px solid #ccc;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.table1 th, .table1 td {
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.table tr:nth-child(even) {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
/* style the .table header */
|
||||
.table th {
|
||||
background-color: #77002e;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
46
components/halaman/Penulis.js
Normal file
46
components/halaman/Penulis.js
Normal file
@ -0,0 +1,46 @@
|
||||
import classess from "./InputData.module.css";
|
||||
import Card from "../ui/Card";
|
||||
function Penulis(){
|
||||
return(
|
||||
<Card>
|
||||
<form className={classess.form} >
|
||||
<div className={classess.control}>
|
||||
<table className={classess.table1}>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td width="25%"> Nama </td>
|
||||
<td> <i>:</i> </td>
|
||||
<td> <b> Gusniarni Darwis</b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> NIM </td>
|
||||
<td> <i>:</i> </td>
|
||||
<td> <b> 217 280 213</b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> Pembimbing 1 </td>
|
||||
<td> <i>:</i> </td>
|
||||
<td> <b> Ir.Syahirun Alam, S.T ., M.T ., IPM</b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> Pembimbing 2 </td>
|
||||
<td> <i>:</i> </td>
|
||||
<td> <b> Ir.Untung Suwardoyo , S.Kom ., M.T ., IPP</b> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> Judul </td>
|
||||
<td> <i>:</i> </td>
|
||||
<td className={classess.ini}> <b> IMPLEMENTASI LOGIKA <i>FUZZY</i> PADA TINGKAT KEMATANGAN BUAH DURIAN BERBASIS <i>WEB</i></b> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default Penulis;
|
||||
13
components/layout/Layout.js
Normal file
13
components/layout/Layout.js
Normal file
@ -0,0 +1,13 @@
|
||||
import classes from "./Layout.module.css";
|
||||
import MainNavigation from "./MainNavigation";
|
||||
|
||||
function Layout(props) {
|
||||
return (
|
||||
<div>
|
||||
<MainNavigation />
|
||||
<main className={classes.main}>{props.children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
5
components/layout/Layout.module.css
Normal file
5
components/layout/Layout.module.css
Normal file
@ -0,0 +1,5 @@
|
||||
.main {
|
||||
margin: 3rem auto;
|
||||
width: 90%;
|
||||
max-width: 40rem;
|
||||
}
|
||||
20
components/layout/MainNavigation.js
Normal file
20
components/layout/MainNavigation.js
Normal file
@ -0,0 +1,20 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import classess from './MainNavigation.module.css'
|
||||
|
||||
function MainNavigation() {
|
||||
return (
|
||||
<header className={classess.header}>
|
||||
<div className={classess.logo}>Fuzzy Durian</div>
|
||||
<nav className={classess.nav}>
|
||||
<ul>
|
||||
<li><Link href='/'>Cek Data</Link></li>
|
||||
<li><Link href='/dataset'>Dataset</Link></li>
|
||||
<li><Link href='/penulis'>Penulis</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default MainNavigation;
|
||||
61
components/layout/MainNavigation.module.css
Normal file
61
components/layout/MainNavigation.module.css
Normal file
@ -0,0 +1,61 @@
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #77002e;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.header li {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.header a {
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
color: #fcb8d2;
|
||||
}
|
||||
|
||||
.header a:hover,
|
||||
.header a:active,
|
||||
.header a.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: #cc2062;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
padding: 0 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* if display < 600px then hide logo */
|
||||
@media screen and (max-width: 600px) {
|
||||
.header .logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* set the li from left to right */
|
||||
.header li {
|
||||
margin-left: 0;
|
||||
/* add space between li */
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
9
components/ui/Card.js
Normal file
9
components/ui/Card.js
Normal file
@ -0,0 +1,9 @@
|
||||
import classes from "./Card.module.css";
|
||||
|
||||
function Card(props) {
|
||||
return <div className={classes.card}>
|
||||
{props.children}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Card;
|
||||
5
components/ui/Card.module.css
Normal file
5
components/ui/Card.module.css
Normal file
@ -0,0 +1,5 @@
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user