Uts Pemograman Web II Kelompok I

UTS PEMOGRAMAN WEB II KELOMPOK I
Output Soure Code :

1. Hal Login
2. Isi Folder Sebelum Di Masukan Akun.

3. Daftar Untuk Menyimpan Akun Ke .txt
4. Pesan Data Tersimpan

5. Silahkan Login
6. Hal Utama
7. Input angka yg akan di conver di Aplikasi ini diconvert dengan satu satu Masaing
Button.
a.Convert Bilangan Biner
b.Conver Bilangan Oktal

c.Convert Bilangan Hexadesimal
d.Convert Bilangan Desimal

8. Untuk Menyetak Output Di Aplikasi Web Ini Mengunakan Create File Manual jika
Otomatis Output Tercetak tapi Hasil tidak Keluar.Maka. Maka Saya Buat
Manual Sehingga Dapat Dicopy ke input Text dan Cetak .
9. Selanjutnya Paste kan dan Submit
10. Submit Dan Keluar Pesan Jika Data Tersimpan

11. Hasil Akan Tersimpan Ke dalam Folder Dan Lakukan Convert dengan Banyak
Source Code :
• Index.php
• <?php
• function test_input($data)
• {
• $data = trim($data);
• $data = stripslashes($data);
• $data = htmlspecialchars($data);
• return $data;
• }
• // define variables and set to empty values
• $username = $password = "";
• if ($_SERVER["REQUEST_METHOD"] == "POST") {
• $name = test_input($_POST["admin_email"]);
• $password = test_input($_POST["admin_pass"]);
•
• $myfile = fopen("akun.txt", "a+") or die("Unable to open file!"
);
• fwrite($myfile, "Username :" . $name . " " . "Password :" . $pa
ssword . "\r\n");
• fclose($myfile);
• }
• ?>
• <!DOCTYPE html>
• <html lang="en">
•
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width-device-width,initial-
scale=1">
• <title>UTS KELOMPOK I</title>
• <link rel="stylesheet" href="style/loginstyle.css">
• <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
• <script src="js/jquery.js"></script>
• <script src="bootstrap/js/bootstrap.min.js"></script>
• <link rel="stylesheet" href="font-awesome-4.7.0/css/font-
awesome.min.css">
• </head>
• <style>
• body {
• margin: 0;
• padding: 0;
• width: 100%;
• height: 100vh;
• background: #000;
• }
•
• .login-form {
• position: absolute;
• top: 50%;
• left: 50%;
• transform: translate(-50%, -50%);
• width: 350px;
• padding: 10px 10px;
• background: linear-
gradient(to bottom, #2b62a1 0%, rgb(0, 247, 255) 100%);
• }
•
• .login-form h2 {
• margin: 0 0 40px;
• padding: 0;
• text-align: center;
• }
•
• .login-form .form-input {
• position: relative;
• margin: 20px 0;
• }
•
• .login-form .form-submit input {
• margin: 20px 0;
• font-size: 24px;
• font-weight: Bold;
• background-color: #2b62a1;
• color: aliceblue;
• }
•
• .login-form .form-submit a {
• margin: 20px 0;
• font-weight: Bold;
• color: black;
• }
•
• .login-form .button {
• margin: 20px 0;
• }
•
• .login-form .form-input input {
• outline: none;
• height: 40px;
• padding: 10px;
• box-sizing: border-box;
• width: 100%;
• border: 1px solid rgba(0, 0, 0, .8);
• font-size: 1px;
•
• }
•
• .login-form .form-submit button {
• outline: none;
• height: 40px;
• padding: 10px;
• width: 100%;
• font-size: 1px;
•
• }
•
• .login-form .button a {
• margin: 6px;
•
• }
• </style>
•
• <body data-vide-bg="loginbg">
• <div class="login-form">
• 
• <form class="form-login" method="post" action="login.php">
• 
•
• <h2 class="form-login-heading"> Admin Login </h2>
•
• <div class="form-input">
• <input type="text" class="form-
control" placeholder="Email Address" name="Username" required>
• </div>
•
• <input type="password" class="form-
control" placeholder="Your Password" name="Password" required>
• </div>
•
• <div class="form-submit">
• <input type="submit" class="form-
control" value="Submit">
• <button><a href="daftar.php">Daftar</a></button>
• </div>
•
• </form>
• </div>
•
• <script src="js/jquery/dist/jquery.min.js"></script>
• <script src="js/Vide-master/dist/jquery.vide.min.js"></script>
• </body>
•
• </html>
• Login.php
<?php
$myFile = "akun.txt";
$contents = file_get_contents($myFile);
$contents = explode("\n", $contents);
foreach ($contents as $values) {

$loginInfo = explode(":", $values);
$user = $loginInfo[1];
if ($user == $_POST['username'] && $password == $_POST['password']) {

echo '<p> Maaf coba lagi </p>';
} else {
header('Location: menu-utama.php');
}
}
• Daftar.php
• <!DOCTYPE HTML>
• <html>
•
• <head>
• <title>Membaca (Parsing) File .txt dengan PHP</title>
• </head>
•
• <body>
•
• <!DOCTYPE html>
• <html lang="en">
•
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width-device-width,initial-
scale=1">
• <title>EmoStore</title>
• <link rel="stylesheet" href="style/loginstyle.css">
• <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
• <script src="js/jquery.js"></script>
• <script src="bootstrap/js/bootstrap.min.js"></script>
• <link rel="stylesheet" href="font-awesome-4.7.0/css/font-
awesome.min.css">
• </head>
• <style>
• body {
• margin: 0;
• padding: 0;
• width: 100%;
• height: 100vh;
• background: #000;
• }
•
• .login-form {
• position: absolute;
• top: 50%;
• left: 50%;
• transform: translate(-50%, -50%);
• width: 350px;
• padding: 10px 10px;
• background: linear-
• }
•
• .login-form h2 {
• margin: 0 0 40px;
• padding: 0;
• text-align: center;
• }
•
• .login-form .form-input {
• margin: 20px 0;
• }
•
• .login-form .button {
• margin: 20px 0;
• }
•
• .login-form .form-input input {
• margin: 5px;
• outline: none;
• height: 20;
• padding: 5px;
• width: 100%;
• background: transparent;
• font-size: 12;
• border-radius: 5px;
• box-shadow: 0 1px 5px rgba(2, 3, 95, 0.8);
• background-color: whitesmoke;
• }
•
• .login-form .form-submit input {
• margin-left: 80px;
• margin-right: 70px;
• outline: none;
• height: 20;
• padding: 5px;
• width: 50%;
• background: transparent;
• font-size: 12;
• border-radius: 5px;
• box-shadow: 0 1px 5px rgba(2, 3, 95, 0.8);
• background-color: steelblue;
• font-weight: 700;
• font-
family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
• }
• </style>
•
• <body data-vide-bg="loginbg">
• <div class="login-form">
• 
• <form name="form1" method="post" action="proses.php">
• 
• <h2 class="form-login-heading"> Register </h2>
• <label class="input-group-text">Email : </label>
• <input type="text" class="form-
control" placeholder="Email Address" name="email" size="3" required>
• </div>
•
• <label class="input-group-text">Password : </label>
• <input type="password" class="form-
control" placeholder="Your Password" name="pass" required>
• </div>
•
• <div class="form-submit">
• <input name="Submit" type="submit" value="Simpan"><
/td>
• </div>
•
• </form>
• </div>
•
• <script src="js/jquery/dist/jquery.min.js"></script>
• <script src="js/Vide-master/dist/jquery.vide.min.js"></script>
• </body>
• </html>
• </body>
•
• </html>
• Proses.php
<?php
// Menangkapisivariabeldariform.php
$id = $_POST['email'];
$nama = $_POST['pass'];
// Format data yang akandiparsing

$data = "\n $id|$nama";
// Buka file data.txt, kemudiantuliskanisivariabel di ataskedalam data.txt

$fh = fopen("akun.txt", "a");
fwrite($fh, $data);
// Tutup file data.txt

fclose($fh);
// Keteranganbila data berhasil diinput

print "Data TelahTersimpan.</br><a href='index.php'>Kembalike Login</a>";
• Akun.php
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Baca (Parsing) File .txt dengan PHP</title>
• </head>
•
• <body>
• <?php
• $txt_file = file_get_contents('akun.txt');
• $rows = explode("\n", $txt_file);
• array_shift($rows);
•
• echo '<h3>MY AKUN</h3>';
• $i = 1;
•
• foreach ($rows as $row => $data) {
•
• // Memisahkan Item Data dariPemisah |, array pada PHP dimulaipa
da index ke-0
• $row_data = explode('|', $data);
•
• $info[$row]['email'] = $row_data[0];
• $info[$row]['pass'] = $row_data[1];
•
• // Menampilkan Data
•
• echo ' EMAIL: <b>' . $info[$row]['email'] . '</b><br />';
• echo ' PASS: <b>' . $info[$row]['pass'] . '</b><br />';
• echo "<br><br>";
• echo '<a href="index.php">Login</a></br></br><hr>';
• }
• ?>
• </body>
• </html>
• Menu-utama.php
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title>UTS KELOMPOK II</title>
<link rel="stylesheet" href="style/loginstyle.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
</head>
<style>
body {
margin: 0;
padding: 0;
background: linear-
font-
family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Un
icode', Geneva, Verdana, sans-serif;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.inpbox {
position: relative;
transform: translate(10%, 10%);
width: 300px;
padding: 30px 20px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(2, 3, 95, 0.8);
}
.outbok {
position: relative;
width: 300px;
padding: 20px 0px;
text-align: center;
color: #2b62a1;
font-weight: bold;
font-size: 17px;
}
.box1 {
position: relative;
width: 300px;
padding: 30px 20px;
.box2 {
position: relative;
width: 300px;
padding: 30px 20px;
}
.box3 {
position: relative;
width: 300px;
padding: 30px 20px;
}
.box4 {
position: relative;
width: 300px;
padding: 30px 20px;
}
.box5 {
position: relative;
width: 400px;
padding: 10px 10px;
}
.box6 {
position: relative;
transform: translate(200%, -100%);
width: 300px;
padding: 10px 10px;
}
.kelompok {
text-align: center;
font-size: 14px;
font-weight: 600;
.kelompok .fa-fw {
color: #2b62a1;
size: 20px;
font-size: 20px;
.box2 input {
outline: none;
height: 20;
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid rgba(0, 0, 0, .8);
background: transparent;
font-size: 17px;
border-radius: 5px;
text-align: center;
font-weight: 700;
}
.box5 input {
outline: none;
height: 20;
padding: 20px;
width: 350px;
font-size: 12px;
border-radius: 5px;
font-weight: 200;
}
.box5 input:hover {
background-color: 2b62a1;
}
.box1 .boxform #form-biner .judul {

text-align: center;
font-size: 20px;
margin: 5px;
}
.outputbox .boxform {
text-align: center;
}
.inpbox #form-biner input {

outline: none;
height: 20;
padding: 20px;
width: 100%;
font-size: 12;
border-radius: 5px;
text-align: center;
font-size: 17px;
font-weight: 700;
.box1 #form-biner input {

outline: none;
height: 30px;
padding: 20px;
width: 100%;
background: whitesmoke;
font-size: 17px;
border-radius: 5px;
text-align: center;
font-weight: 700;
}

outline: none;
height: 20;
padding: 20px;
width: 100%;
font-size: 17px;
border-radius: 5px;
text-align: center;
font-weight: 700;

outline: none;
height: 20;
padding: 20px;
width: 100%;
font-size: 17px;
border-radius: 5px;
text-align: center;
font-weight: 700;
#hasilnya {
text-align: center;
font-size: 17px;
font-weight: bold;
font-style: italic;
color: #2b62a1;
}
</style>
<script>
function oktbin() {
var octal = (document.form.angka.value);
var biner = parseInt(octal, 8).toString(2);
document.getElementById("hasilnya").innerHTML = biner;
var contobin = document.getElementById("hasilnya");
contobin.innerHTML = "(" + octal + ")" + "<sub>8</sub>" + " = " + "("
+ hasilnya.innerHTML + ")" + "<sub>2</sub>"
}
function binkeok() {
var biner = (document.form.angka.value);
var octal = parseInt(biner, 2).toString(8);
document.getElementById("hasilnya").innerHTML = octal;
var conoct = document.getElementById("hasilnya");
conoct.innerHTML = "(" + biner + ")" + "<sub>2</sub>" + " = " + "(" +
hasilnya.innerHTML + ")" + "<sub>8</sub>"
}
function binhex() {
var biner = (document.form.angka.value);
var hex = parseInt(biner, 2).toString(16);
document.getElementById("hasilnya").innerHTML = hex;
var conhex = document.getElementById("hasilnya");
conhex.innerHTML = "(" + biner + ")" + "<sub>2</sub>" + " = " + "(" +
}
function hexbin() {
var hex = (document.form.angka.value);
var biner = parseInt(hex, 16).toString(2);
document.getElementById("hasilnya").innerHTML = biner;
var conbin = document.getElementById("hasilnya");
conbin.innerHTML = "(" + hex + ")" + "<sub>16</sub>" + " = " + "(" +
}
function octhex() {
var octal = (document.form.angka.value);
var hex = parseInt(octal, 8).toString(16);
document.getElementById("hasilnya").innerHTML = hex;
conhex.innerHTML = "(" + octal + ")" + "<sub>8</sub>" + " = " + "(" +
}
function hexoct() {
var hex = (document.form.angka.value);
var octal = parseInt(hex, 16).toString(8);
document.getElementById("hasilnya").innerHTML = octal;
conhex.innerHTML = "(" + hex + ")" + "<sub>16</sub>" + " = " + "(" +
}
</script>
<body>
<div class="row">
<div class="col-sm-4">
<div class="box1">
<div id="form-biner" class="input-group mb-3">
<form name="form" method="post" action="" class="boxform">
<tr>
<td> </td>
<td>
<input type="submit" name="binkedec" value="bi
ner ke decimal" /></td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" name="benkeok" id="conver
t" value="biner ke oktal" onClick="binkeok()">
</tr>
<tr>
<td> </td>
<td>
<input type="button" name="binkehex" id="conve
rt" value="biner ke hexadesimal" onClick="binhex()">
</tr>
</div>
</div>
</div>
<div class="box2">
<tr>
<td> </td>
<td>
<input type="button" name="convert" id="convert" value
="oktal ke biner" onClick="oktbin()">
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="octkedec" value="octal ke d
ecimal" /></td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" name="convert" id="convert" value
="oktal ke hexadesimal" onClick="octhex()">
</tr>
</div>
</div>
<div class="inpbox">
<h1 align="center" class="judul">Konversi Bilangan</h1><br
>
<input type="text" name="angka" id="angka" placeholder="In
put Angka"><br>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="box3">
<tr>
<td> </td>
<td>
<input type="button" name="convert" id="convert" v
alue="hexadesimal ke biner" onClick="hexbin()">
</tr>
<tr>
<td> </td>
<td>
<input type="button" name="convert" id="convert" v
alue="hexadesimal ke oktal" title="hexadesimal ke oktal" onClick="hexoct()">
</tr>
<tr>
<td> </td>
<input type="submit" name="hexkedes" value="hexadesima
l ke desimal" /></td>
</tr>
</div>
</div>
</div>
<div class="box4">
<tr>
<td> </td>
<td>
<input type="submit" name="deckebin" value="desima
l ke binner" /></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="deckeoct" value="desima
l ke octal" /></td>
</tr>
<tr>
<td> </td>
<input type="submit" name="deskehex" value="desimal ke
hexadesimal" /></td>
</tr>
</div>
</form>
</div>
</div>
<div class="outbok">
<p id="hasilnya" align="center" name="cetakin" />

</p>
<?php
$angka = isset($_POST['angka']) ? $_POST['angka'] : "";

if (isset($_POST['deckebin'])) {
echo decbin($angka);
}
if (isset($_POST['binkedec'])) {
echo bindec($angka);
}
if (isset($_POST['octkedec'])) {
echo octdec($angka);
}
if (isset($_POST['deckeoct'])) {
echo decoct($angka);
}
if (isset($_POST['hexkedes'])) {
echo hexdec($angka);
}
if (isset($_POST['deskehex'])) {
echo dechex($angka);
}
?>
</form>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-3">
<div class="box5">
<form method="post" action="cetak.php">
<tr>
<input type="text" class="form-
control" placeholder="Hasilnya Dicopy Baru Submit Untuk Di cetak" name="hasilt
ukcetak" size="3" required>
</tr>
<tr>
<td> </td>
<br><input type="submit" value="Submit" /></td>
</tr>
</div>
</form>
</div>
</div>
<div class="box6">
<h3 align="center">Kelompok II</h3>
<p class="kelompok">
<i class="fa fa-fw fa-
user"></i><a href="http://riskitomy767@gmail.com" title="riskitomy767@gmail.co
m"> Riski Ardiansyah</a><br>
user"></i><a href="http://anggaandrianto7@gmail.com" title="anggaandrianto7@gm
ail.com">Angga Andrianto</a><br>
user"></i><a href="http://reggiansyah30@gmail.com" title="reggiansyah30@gmail.
com">Reggiansyah</a><br>
user"></i><a href="http://vitrinoviani22@gmail.com" title="vitrinoviani22@gmai
l.com">vitrinoviani</a><br>
</p>
</div>
<br>
<br>
</div>
</div>
</body>
</html>
• Cetak.php
• <?php
•
• // Menangkapisivariabeldariform.php
• $hasil = $_POST['hasiltukcetak'];
•
• // Format data yang akandiparsing
• $cetak = "\n $hasil";
•
• // Buka file data.txt, kemudiantuliskanisivariabel di ataskedalam data.
txt
• $fh = fopen("hasil.txt", "a");
• fwrite($fh, $cetak);
•
• // Tutup file data.txt
• fclose($fh);
•
• // Keteranganbila data berhasildiinput
• print "Data TelahTersimpan.</br><a href='hom3.php'>Menu Utama >></a>";
•
TERIMA KASIH

Uts Pemograman Web II Kelompok I

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Uts Pemograman Web II Kelompok I

Diunggah oleh

Hak Cipta:

Format Tersedia

UTS PEMOGRAMAN WEB II KELOMPOK I

Output Soure Code :

2. Isi Folder Sebelum Di Masukan Akun.

4. Pesan Data Tersimpan

b.Conver Bilangan Oktal

d.Convert Bilangan Desimal

9. Selanjutnya Paste kan dan Submit

10. Submit Dan Keluar Pesan Jika Data Tersimpan

foreach ($contents as $values) {

if ($user == $_POST['username'] && $password == $_POST['password']) {

// Format data yang akandiparsing

// Buka file data.txt, kemudiantuliskanisivariabel di ataskedalam data.txt

// Tutup file data.txt

// Keteranganbila data berhasil diinput

.box1 .boxform #form-biner .judul {

.inpbox #form-biner input {

.box1 #form-biner input {

.box3 #form-biner input {

.box4 #form-biner input {

<p id="hasilnya" align="center" name="cetakin" />

$angka = isset($_POST['angka']) ? $_POST['angka'] : "";

Anda mungkin juga menyukai