1. Flowchart
Program flowchart adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses (instruksi) dengan proses lainya dalam suatu program(Widia,1983:4).
a. Gambar halaman utama (Homepage)
b. Gambar halaman Biodata
c. Gambar halaman riwayat pendidikan
Berdasrkan rancangan pada tampilan di atas, flowchart pada web biodataku dapat dibuat sbb :
Dari gambar flowchart di atas dapat dijelaskan bahwa :
- User/pengguna pilih "start" yang diwakili oleh simbol terminator yang menggambarkan kegiatan awal dari suatu proses.
- Kemudian ditampilkan halaman utama yang diwakili oleh simbol proses yang berfungsi menggambarkan suatu proses.
- setelah menampilkan halaman utama, user disediakan beberapa pilihan. dimana setiap pilihan yang ada disediakan oleh simbol decision yang berfungsi menggambarkan suatu keputusan atau tindakan yang harus diambil pada kondisi tertentu(T/F).
- jika user memilih "Home" maka user akan tetap berada di halaman utama, ditujukan dengan simbol line connector yang mengarah ke " Menampilkan Tampilan Utama"
- jika pilih "Biodata" maka user akan dibawa/masuk ke "Tampilan Biodata" yang ditujukan dengan simbol off-page-reference yang berfungsi menghubungkan suatu simbol dengan simbol yang lainnya pada bagian yang berbeda.
- jika pilih "R.P(Riwayat Pendidikan) maka user akan dibawa/masuk ke "Tampilan Riwayat Pendidikan".
- simbol terminator "End" menggambarkan akhir dari suatu proses
2. Algoritma
Algoritma dari web biodataku berdasarkan flowchart diatas yaitu
- Start
- Menampilkan Tampilan Utama
- if pilih = Home then
- kembali ke Tampilan Utama
- else if pilih = Biodata then
- Menuju ke Tampilan Biodata
- else if pilih = R.P(Riwayat Pendidikan) then
- Menuju ke Tampilan Riwayat Pendidikan
- else
- end
- end if
3. SourceCode
a. HTML :
<!DOCTYPE html>
<html lang="en" id="home">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>MyBiodata</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#home" class="navbar-brand page-scroll" >Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#about" class="page-scroll">Biodata</a></li>
<li><a href="#pendidikan" class="page-scroll">Riwayat Pendidikan</a></li>
</ul>
</nav>
<!-- Akhir navbar -->
<!--Jumbotron -->
<div class="jumbotron text-center">
<h1>Welcome to My Web</h1>
<h2>My Biodata</h2>
<img src="img/fitri.jpg" class="img-circle">
<p>Fitri Wabula | 52416895</p>
</div>
<!-- Akhir jumbotron -->
<!-- about -->
<section class="about text-center" id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 text center">
<center><h2>About me</h2></center>
<hr>
<a href="">
<img src="img/potho/1.png" class="img-circle">
</a>
</div>
</div>
</div>
</section>
<!-- Akhir about -->
<!-- Tabel about -->
<section>
<div></div>
<center>
<table border="2" id="bagan">
<tr style="background-color: gold;">
<td>Biodata</td>
<td>Keterangan</td>
</tr>
<tr>
<td>Nama </td>
<td>Fitri Wabula</td>
</tr>
<tr>
<td>TTL </td>
<td>Masohi-06-05-1998</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Tinggi/Berat badan</td>
<td>150cm/60kg</td>
</tr>
<tr >
<td>Status</td>
<td>Belum menikah</td>
</tr>
<tr>
<td>Hoby</td>
<td>menonton Anime</td>
</tr>
<tr>
<td>Filem favorite</td>
<td>Ga-Rei: Zero (2008) dan Violet evergarden</td>
</tr>
<tr>
<td>Lagu Favorite</td>
<td>Liam Payne, Rita Ora - For You </td>
</tr>
<tr>
<td>Makanan favorite</td>
<td>Bakso dan Ice cream</td>
</tr>
<tr>
<td>Olahraga favorite</td>
<td>Badmintoon</td>
</tr>
</table>
</center>
</section>
<!-- Akhir tabel about -->
<!-- gambar pendidikan -->
<section class="pendidikan text-center" id="pendidikan">
<div class="container">
<div class="row">
<div class="col-sm-12 text center">
<center><h2>Riwayat Pendidikan</h2></center>
<hr>
<a href="">
<img src="img/potho/2.png" class="img-circle">
</a>
</div>
</div>
</div>
</section>
<!-- akhir gambar pendidikan -->
<!-- tabel pendidikan -->
<section class="pendidikan">
<center>
<table border="2">
<tr style="background-color: skyblue;">
<td>Riwayat Pendidikan</td>
<td>Keterangan</td>
</tr>
<tr>
<td>Nama </td>
<td>Fitri Wabula</td>
</tr>
<tr>
<td>NPM </td>
<td>52416895</td>
</tr>
<tr>
<td>Kelas</td>
<td>2IA20</td>
</tr>
<tr>
<td>Alamat</td>
<td> Jalan jatiluhur raya, Jakasampurna Bekasi Timur</td>
</tr>
<tr>
<td>Perguruan Tinggi</td>
<td>Universitas Gunadarma (2016-2020)</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Fakultas</td>
<td>Teknologi Informatika</td>
</tr>
<tr>
<td>Jenjang</td>
<td>S1</td>
</tr>
<tr>
<td>Sekolah Dasar</td>
<td>SD N 4 Masohi(2004-2010)</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>Smp N 2 Ambon(2010-2013)</td>
</tr>
<tr>
<td>Sekolah Menengah Atas</td>
<td>SMA N 11 Ambon(2013-2016)</td>
</tr>
</table>
</center>
</section>
<!-- Akhir tabel pendidikan -->
<section></section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
b. CSS :
.jumbotron img{
width: 250px;
border: 4px solid beige;
}
.about hr{
width: 200px;
border-top: 4px solid grey;
min-height: 20px;
}
section{
min-height: 400px;
}
.about img{
width: 250px;
border: 4px solid moccasin;
}
td{
width: 250px;
height: 34px;
}
.pendidikan img{
width: 250px;
border: 4px solid purple;
}
.pendidikan hr{
width: 300px;
border-top: 4px solid grey;
min-height: 20px;
}
.pendidikan {
background-color: ;
}
c. JavaScript :
// event pada saat link di klik
$('.page-scroll').on('click', function(e){
//ambil isi href(# id )
var tujuan = $(this). attr('href');
//tangkap elemen ybs
var elemenTujuan = $(tujuan);
//pindahkan scroll
$('body').animate({
scrollTop: elemenTujuan.offset().top -50
}, 1200, 'easeInOutExpo');
e.preventDefault();
});
Referensi :
http://umardanny.com/contoh-flowchart-program-sistem-pakar/
Tidak ada komentar:
Posting Komentar