first commit
This commit is contained in:
kicap1992
3
.eslintrc.json
Normal file
3
.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
40
.gitignore
vendored
Normal file
40
.gitignore
vendored
Normal file
@ -0,0 +1,40 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# googlekey.json
|
||||
googlekey.json*
|
||||
|
||||
# cert
|
||||
cert.crt
|
||||
cert.key
|
||||
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);
|
||||
}
|
||||
6
next.config.js
Normal file
6
next.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
6761
package-lock.json
generated
Normal file
6761
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.8.2",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.5.3",
|
||||
"next": "12.1.4",
|
||||
"nextjs-progressbar": "^0.0.14",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-toastify": "^8.2.0",
|
||||
"sweetalert2": "^11.4.8",
|
||||
"sweetalert2-react-content": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "8.12.0",
|
||||
"eslint-config-next": "12.1.4"
|
||||
}
|
||||
}
|
||||
15
pages/_app.js
Normal file
15
pages/_app.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Layout from '../components/layout/Layout'
|
||||
import '../styles/globals.css'
|
||||
import NextNProgress from "nextjs-progressbar";
|
||||
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<>
|
||||
<NextNProgress />
|
||||
<Layout><Component {...pageProps} /></Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
41
pages/dataset/index.js
Normal file
41
pages/dataset/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
import DataSet from "../../components/halaman/DataSet";
|
||||
import Card from "../../components/ui/Card";
|
||||
|
||||
function PageDataSet(props){
|
||||
let data = JSON.parse(props.data);
|
||||
// console.log(data)
|
||||
let status = JSON.parse(props.data).status;
|
||||
// console.log(status)
|
||||
|
||||
return (status == "success") ?<DataSet data={data} /> : <Card> <br /> <center> <h2>Server Bermasalah ...</h2></center> <br /></Card>
|
||||
|
||||
// return <h1>okok</h1>
|
||||
}
|
||||
|
||||
export async function getStaticProps() { // this code never end up on client side ,excecuted during build time
|
||||
// fetch data from an API, for example
|
||||
let data;
|
||||
try {
|
||||
//fetches data http://127.0.0.1:5000/ with method get
|
||||
const response = await fetch('https://myfuzzybe2.herokuapp.com/', {
|
||||
method: 'GET',
|
||||
})
|
||||
//convert response to json
|
||||
data = await response.json()
|
||||
data['status'] = 'success'
|
||||
|
||||
} catch (e) {
|
||||
data = {"error": e,'status':'error'}
|
||||
}
|
||||
|
||||
// console.log(data)
|
||||
|
||||
return {
|
||||
props: { //this has to be named `props`
|
||||
data: JSON.stringify(data)
|
||||
},
|
||||
revalidate: 10 //revalidate after 10 second
|
||||
}
|
||||
}
|
||||
|
||||
export default PageDataSet;
|
||||
34
pages/index.js
Normal file
34
pages/index.js
Normal file
@ -0,0 +1,34 @@
|
||||
import InputData from "../components/halaman/InputData";
|
||||
|
||||
function HomePage(props) {
|
||||
const data = JSON.parse(props.data);
|
||||
return <InputData data={data} />;
|
||||
}
|
||||
|
||||
export async function getStaticProps() { // this code never end up on client side ,excecuted during build time
|
||||
// fetch data from an API, for example
|
||||
let data;
|
||||
try {
|
||||
//fetches data http://127.0.0.1:5000/ with method get
|
||||
const response = await fetch('https://myfuzzybe2.herokuapp.com/', {
|
||||
method: 'GET',
|
||||
})
|
||||
//convert response to json
|
||||
data = await response.json()
|
||||
data['status'] = 'success'
|
||||
|
||||
} catch (e) {
|
||||
data = {"error": e,'status':'error'}
|
||||
}
|
||||
|
||||
// console.log(data)
|
||||
|
||||
return {
|
||||
props: { //this has to be named `props`
|
||||
data: JSON.stringify(data)
|
||||
},
|
||||
revalidate: 10 //revalidate after 10 second
|
||||
}
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
7
pages/penulis.js
Normal file
7
pages/penulis.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Penulis from "../components/halaman/Penulis";
|
||||
|
||||
function penulisPage(){
|
||||
return <Penulis />
|
||||
}
|
||||
|
||||
export default penulisPage;
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
4
public/vercel.svg
Normal file
4
public/vercel.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
16
styles/globals.css
Normal file
16
styles/globals.css
Normal file
@ -0,0 +1,16 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
Reference in New Issue
Block a user