1. Flowchart
Flowchart
adalah bagan alir adalah bagan (chart) yang menunjukkan alir (flow)
di dalam program atau prosedur sistem secara logika. Bagan alir (flowchart)
digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi.
Gambar flowchart ini
menjelaskan:
·
User memilih start
untuk langkah awal memulai dengan simbol yang bernama terminator untuk pernyataan
awal/akhir program.
·
Setalah dari start,
user akan langsung ke menu utama dengan simbol input/output menyatakan proses
input/output dari data.
·
Di sini ada pilihan
kotak kondisi dari biodata, ketika user memilih kotak ini akan menampilkan biodata
yang akan dibuat.
·
Kotak kondisi
terminator ini akan mengakhiri program, ketika user sudah selesai memakainya.
A. Halaman Menu Utama
B. Halaman Biodata
2. Algoritma:
- Start
- Ke
Menu Utama
- If
Biodata then
- Menuju
Tampilan Biodata
- Else
Biodata
-
End.
3. SourceCode
v Biodata
<!DOCTYPE html>
<html
lang="en">
<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>Ryan</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>
<!--Jumbotron -->
<div class="jumbotron
text-center">
<h1>Hello, this is my web. Enjoy
it!</h1>
<br>
<img src="img/7.png"
class="img-circle">
<br>
<br>
<a
href="file:///C:/Users/user/Downloads/Compressed/Ryan/Ryan/index.html"><h3>[Biodata
Diri]</h3></a>
<br>
<br>
<br>
<font color="red">
<h4>Created by :</h4>
</font>
<h4>Ryan Afie Naufal</h4>
<h4>56416723</h4>
<br>
<br>
<br>
</div>
<!-- Akhir jumbotron -->
<!-- jQuery (necessary for Bootstrap's
JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins
(below), or include individual files as needed -->
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
v Index
<!DOCTYPE html>
<html
lang="en">
<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>Ryan</title>
<!-- Bootstrap -->
<link
href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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 >
<center>
<section class="about text-center"
id="about">
<br>
<br>
<br>
<h2>My Biodata</h2>
<br>
<br>
<img src="img/8.png"
widht="500px" height="300px"
class="img-circle">
</center>
</section>
<!-- Akhir about -->
<!-- Tabel about -->
<section>
<div></div>
<center>
<br>
<br>
<table border="2"
id="bagan">
<tr style="background-color:
skyblue;">
<td
width="200">Biodata</td>
<td
width="200">Keterangan</td>
</tr>
<tr>
<td>Nama</td>
<td> Ryan Afie Naufal</td>
</tr>
<tr>
<td>NPM</td>
<td>56416723</td>
</tr>
<tr>
<td>Kelas </td>
<td>2IA20</td>
</tr>
<tr>
<td>Universitas</td>
<td>Gunadarma</td>
</tr>
<tr>
<td>Fakultas</td>
<td>Teknologi Industri</td>
</tr>
<tr >
<td>Jurusan</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Angkatan</td>
<td>2016</td>
</tr>
<tr>
<td>Hobby</td>
<td>Bermain bola dan mencintaimu
sepenuh hati</td>
</tr>
</table>
<br>
<br>
<marquee> <font
color="red"><p>Note: </font> hei, kalian bisa panggil
saya ryan si tampan. Saya anak pertama dari 2 bersaudara, untuk kedepannya
semoga bisa membahagiakan orang tua dan dirimu di masa depan. sukses dunia dan
akhirat!</p></marquee>
</center>
</section>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Akhir tabel about
-->
<!-- jQuery (necessary for Bootstrap's
JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins
(below), or include individual files as needed -->
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
