UAS WEB-JoeArt.Com

[UAS WEB-JoeArt.Com] Page 1
Nama : Angga Kusuma
Nim : 1555.2010.65
Prodi : Teknik Informatika, Pagi
Matkul : Pemrograman WEB
Website ini terdiri dari 11 Halaman :
1. Form Login
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Login Joeart</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<form action="proses.php" method="post">
<h1>Login to JoeArt.Com</h1>
<div class="inset">
<div class="logo-image" align="center">
<img src="gambar/login.png" alt="Logo" title="Logo" width="138">
</div>
<p><label for="email">EMAIL ADDRESS</label>
<input type="text" name="email" placeholder='Your Email' id="email" required></p>
<p><label for="password">PASSWORD</label>
<input type="password" name="password" placeholder='Your Password' id="password" required></p>
<p><input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 14 days</label></p>
</div>
<p class="p-container">
<span class="pull-right"><a href="register.php">Register</a></span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
</body>
</html>

2. Form Register
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Registrasi Joeart</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<form action="aksi_register.php" method="post">
<h1>Register for JoeArt.Com</h1>
<div class="inset">
<div class="logo-image" align="center">
<img src="gambar/login.png" alt="Logo" title="Logo" width="138">
</div>
<p>
<label for="email">EMAIL ADDRESS</label>
<input type="text" name="email" placeholder='Your Email' id="email" required>
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" placeholder='Your Password' id="password" required>
</p>
</div>
<p class="p-container">
<span class="pull-right"><a href="index.php">Cancel</a></span>
<input type="submit" name="go" id="go" value="Register">
</p>
</form>
</body>
</html>

3. Form About
Source Code :
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#02a2ff">
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
<p><span style="color: #ff0000;"><strong><span style="font-family: 'verdana',sans-serif; font-size:
large;">Jasa Gambar Vektor</span></strong></span></p>
<center>
<p><img src="gambar/home.jpg" alt="home" width="80%" height="auto"/></p></center>
<br/>
<p>
<span style="color: #ff0000;">JoeArt.Com</span></strong> - Ingin foto kamu atau foto pacarmu di sulap
menjadi kartun? Ingin tampil keren di sosial mediamu dengan foto kartunmu sendiri? Ingin buat kaos
dengan design Kartun wajahmu sendiri? Beruntung banget kamu nyasar disini hehehe, joeart.com
Menyediakan jasa Desain foto menjadi kartun (Vector) dengan harga yang Pas dan tentunya dengan hasil
yang memuaskan.<br /> <br />
Sebelum lanjut, apa anda tahu apa itu vektor? menurut wikipedia sendiri vektor adalah gambar digital
yang berbasiskan persamaan matematis. Gambar Vektor terdiri dari penggabungan koordinat-koordinat
titik menjadi garis atau kurva untuk kemudian menjadi sebuah objek, sehingga gambar tidak menjadi
pecah walaupun diperbesar atau diperkecil. Gambar vektor umumnya memiliki ukuran yang lebih kecil bila
dibandingkan dengan gambar bitmap. Beberapa format gambar vektor di antaranya: SVG, EPS, dan CDR.<br
/> <br />
Umumnya gambar vektor berupa benda / barang di sekitar kita, misal Laptop, Tv, mobil, dll.. saya yakin
pasti kalian sendiri juga pernah melihat gambar benda / barang-barang di atas berupa gambar vector,
nahh apa jadinya kalau yang kita vektor adalah manusia? pasti tambah keren gimana gitu :'D <br /> <br
/>
Makin penasaran ?? Silakan lihat testimonial di page selanjutnya..</p>
 
 
</body>
</html>

4. Form Profil
Source Code :
<html>
<head>
<title>Profile</title>
</head>
large;">My Profil</span></strong></span></p>
<p><img style="border-width: 1px;" src="gambar/profile.jpg" alt="profile" img width="100%"
height="75%"/></p>
<p>Nama gw <em><span style="color: #ff0000;"><strong>Angga
Kusuma</strong></span></em><strong>,</strong> dengan nama keren di google <strong>"Angga Joe
Amstrong"</strong></p>
<p>Sangat hooby dengan hal-hal yang berbau komputer, terutama di bidang desain grafis. Dengan hooby
ini, sekaligus saya manfaatkan menjadi ladang usaha.. yaa lumayan buat nambah-nambahin penghasilan.
hehe..</p>
<p>Maka website <em><strong><span style="color: #ff0000;">JoeArt.Com</span></strong></em> ini kami
ciptakan. Persembahan dari kami dan untuk kalian..</p>
<p> </p>
<p>Nama gw <em><span style="color: #ff0000;"><strong>Angga
Kusuma</strong></span></em><strong>,</strong> dengan nama keren di google <strong>"Angga Joe
Amstrong"</strong></p>
<p>Sangat hooby dengan hal-hal yang berbau komputer, terutama di bidang desain grafis. Dengan hooby
ini, sekaligus saya manfaatkan menjadi ladang usaha.. yaa lumayan buat nambah-nambahin penghasilan.
hehe..</p>
<p>Maka website <em><strong><span style="color: #ff0000;">JoeArt.Com</span></strong></em> ini kami
ciptakan. Persembahan dari kami dan untuk kalian..</p>
<p> </p>
<p><strong><span style="color: #ff0000;">Contact Person :</span></strong></p>
<table style="float: left;" border="1" width="50%" cellspacing="2" cellpadding="3">
<tr>
<td>Name</td>
<td> :</td>
<td>Angga Kusuma</td>
</tr>
<tr>
<td>Contact</td>

<td> :</td>
<td>+62896.4684.8141 [hp][whatsapp]</td>
</tr>
<tr>
<td>Email</td>
<td> :</td>
<td>ajoe354@gmail.com</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>ajoe@hackermail.com</td>
</tr>
<tr>
<td>Socmed</td>
<td> :</td>
<td><a href="https://web.facebook.com/angga.joe.amstrong" target="_blank">Angga Joe Amstrong
[Facebook]</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><a href="https://www.instagram.com/ajoe354/" target="_blank">@ajoe354 [Instagram]</a> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><a href="https://www.google.co.id/maps/place/Sugeng+Mart/@-
6.293969,106.9004743,17z/data=!3m1!4b1!4m5!3m4!1s0x2e69f2a857f8055f:0x7c81658c32f09a55!8m2!3d-
6.293969!4d106.902663" target="_blank">Find Us Google maps [JoeArt Vektor]</a> </td>
</tr>
</table>
 
 
</body>
</html>
5. Form Gallery

Source Code :
<html>
<head><title>Gallery</title></head>
large;">Hight Quality Design</span></strong></span></p>
<p>Membahas Kualitas dan Kepercayaan tidak usah ragu, terhitung sejak Januari 2017 JoeArt mulai
menggeluti bisnis Jasa Vektor dan syukurnya mempunyai Banyak pelanggan dari berbagai Kalangan, Mulai
dari kalangan anak sekolah, para pebisnis, pejabat, Sosialita, hingga kalangan militerpun pernah
menggunakan Jasa Vektor dari <span style="color: #ff0000;">JoeArt.Com</span></p>
<p> </p>
<table border>
<tr>
<td><center width="100%" valign="middle"><a target="_blank" href="gambar/vektor/1 (1).jpg">
<img width="100%" height ="300" border="0" src="gambar/vektor/1 (1).jpg"/>
<div class="desc">Gambar 1</div>
</td>
</td>
</td>
</tr>
<tr>
<td><center width="100%" valign="middle"><a target="_blank" href="gambar/vektor/1 (4).jpg"><img
width="100%" height ="300" border="0" src="gambar/vektor/1 (4).jpg"/>
</td>
</td>
</td>
</tr>
<tr>
</td>
</td>
</td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>

6. Form Harga
Source Code :
<html>
<head>
<title>Harga</title>
</head>
<p><span style="color: #ff0000; font-family: 'verdana',sans-serif; font-size: large;"><strong>List
Harga<br /></strong></span></p>
<p>Ada pepatah mengatakan "<strong>Harga Menentukan Kualitas"</strong>, Eits tapi jangan khawatir,
semua sudah saya pertimbangkan sedemikian rupa, untuk sebuah gambar vector saya bagi menjadi 3 bagian
:</p>
<ol>
<li>Vektor Normal (Ukuran normal vektor, Mencakup hanya bagian kepala sampai leher)
<div>Untuk jenis vektor yang pertama saya membandrol dengan harga <strong><span style="color:
#ff0000;">55.000</span></strong> rupiah.</div>
</li>
<li>
<div>Vektor Setengah Badan (Kepala sampai bagian Pinggang)</div>
<div>Untuk vektor Nomor  dua  ini saya membandrol dengan harga <strong><span style="color:
#ff0000;">65.000</span></strong> rupiah</div>
</li>
<li>
<div>Vektor Full (Mencakup semua badan)</div>
<div>Untuk jenis Vector ketiga, saya membandrolnya dengan harga <strong><span style="color:
#ff0000;">80.000</span></strong> rupiah</div>
</li>
</ol>
<p><em>Dalam hal harga juga bisa berubah sewaktu waktu tergantung Hasil Vector nantinya, apakah lebih
simple atau bahkan lebih Detail, Nah dengan kata lain harga bisa turun / naik <span style="color:
#ff0000;">10 hingga 40%</span>)</em></p>
<p> </p>
<div style="text-align: center;">
<div style="text-align: left;"><span style="color: #ff0000;"><strong><span style="font-family:
'verdana',sans-serif; font-size: large;">Kok Mahal Amat Bang Joe?</span></strong></span></div>
</div>
<div style="text-align: justify;">
<ol>
<li><strong>Soal Tenaga</strong> : Siapa yang ga lelah kalau di suruh duduk di depan Komputer selama
4-7 jam lebih?</li>

<li><strong>Soal Pikiran</strong> : Membuat vektor butuh ide untuk mengembangkan karakter asli, misal
menentukan perpindahan warna, hal tersebut sangat sulit di lakukan, bila salah sedikit mengaturnya,
Bisa amburadul hasil ahirnya.</li>
<li><strong>Soal Listrik</strong> : pembuatan vektor membutuhkan waktu ber jam-jam, di karenakan
pembuatanya dilakukan secara manual di susun satu persatu, tak di pungkiri untuk menyalakan komputer
selama berjam-jam juga butuh daya listrik untuk menghidupinya.</li>
</ol>
</div>
</body>
</html>
7. Form List Order
Source Code :
<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
?>
<p style="text-align: center;"><span style="color: #ff0000;"><strong><span style="font-family:
'verdana',sans-serif; font-size: large;">Daftar Pemesan</span></strong></span></p>
<p style="text-align: left;"><span style="color: #ff0000;"><strong>Opsi Kode Vektor
:</strong></span></p>
<p style="text-align: left;">1. Vektor Normal = <em><span style="color: #ff0000;"><strong>Rp.
55.000</strong></span></em>,- (kepala sampai leher)</p>
<p style="text-align: left;">2. Vektor Setengah Badan = <span style="color: #ff0000;"><em><strong>Rp.
65.000</strong></em></span>,- (kepala sampai pinggang)</p>
<p style="text-align: left;">3. Vektor Full = <span style="color: #ff0000;"><em><strong>Rp. 85.000,-
</strong></em></span> (full seluruh Badan)</p>
<br>
<br>
<center>

<table border='1' Width='90%' >
<tr>

<th> No </th>
<th> Nama </th>
<th> Nomor HP </th>
<th> Kode Vektor </th>
<th> Email </th>
<th> Cara Pembayaran </th>
<th> Note </th>
</tr>
<?php
// Perintah untuk menampilkan data
$queri="Select * From pesan" ; //menampikan SEMUA data dari tabel pesan
$hasil=MySQL_query ($queri); //fungsi untuk SQL
// nilai awal variabel untuk no urut
$i = 1;
// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
echo "
<tr>
<td><center>".$i."</center></td>
<td>".$data['nama']."</td>
<td>".$data['no_hp']."</td>
<td>".$data['kd_vektor']."</td>
<td>".$data['email']."</td>
<td>".$data['pembayaran']."</td>
<td>".$data['note']."</td>
</tr>
";
$i++;
}
?>
</table>
<br><br>
<button onclick="window.print()">Print</button>
     
<button onclick="location.href='cetakpdf.php'" type="button">Cetak PDF</button>
     
<a href="joeart.php?page=order">
<button>Order</button>
</a>
<br><br>
</body>

8. Form Order Vektor
Source Code :
<?php
include "koneksi.php";
?>
<html>
<head>
<title> Registrasi Pemesanan Vektor </title>
</head>
<p style="text-align: left;"><span style="color: #ff0000;"><strong>Opsi Kode Vektor
:</strong></span></p>
<br>
<br>
<p style="text-align: center;"><span style="color: #ff0000;"><strong><span style="font-family:
'verdana',sans-serif; font-size: large;">Registrasi Pemesanan Vektor</span></strong></span></p>
<center>
<form method = 'POST' action = 'aksi_order.php' enctype='multipart/form-data'>
<table width="50%" border = '1' cellpadding = '10' cellspacing = '1'
style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
<tr>
<td width="200"> Nama </td>
<td width = '8' align = 'center'> : </td>
<td> <input type = 'text' placeholder='Nama Lengkap' name = 'nama' style='width:100%;'
required='required'> </td>
</tr>
<tr>
<td> Nomor HP </td>
<td> <input type = 'text' placeholder='+62xxx' name = 'no_hp' style='width:100%;'
</tr>

<tr>
<td> Kode Vektor 1, 2, 3</td>
<td> <input type = "radio" name = "kd_vektor" value="1" checked> 1 [Normal] 
<input type = "radio" name = "kd_vektor" value="2" > 2 [Half] 
<input type = "radio" name = "kd_vektor" value="3" > 3 [Full]</td>
</tr>
<tr>
<td> Email </td>
<td> <input type = 'text' placeholder='email@anda' name = 'email' style='width:100%;'
</tr>
<tr>
<td>Cara Pembayaran</td>
<td> <select name="pembayaran">
<option>-Rekening-</option>
<option value="BCA">BCA</option>
<option value="Mandiri">Mandiri</option>
<option value="BNI">BNI</option>
<option value="Alternatif">Alternatif</option>
</select>
</td>
</tr>
<tr>
<td> Note </td>
<td> <textarea name = 'note' placeholder='Catatan Kecil' style='width:100%;'
required='required'></textarea> </td>
</tr>
<tr>
<td colspan = '3' align = 'center'>
<input type = 'submit' name = 'submit' value = 'Submit'/>
<input type = 'reset' name = 'Reset' value = 'Reset' /> </td>
</tr>
</table>
<a href = 'joeart.php?page=list'> Back </a>
</form>
</body>
</html>

9. Form Cara Order
Source Code :
<html>
<head>
<title>Contact</title>
</head>
<p style="text-align: left;"><span style="color: #ff0000;"><strong><span style="font-family:
'verdana',sans-serif; font-size: large;">Cara Pesan</span></strong></span></p>
<p>Untuk Pemesanan, silahkan Hubungi salah satu contact di bawah ini :</p>
<h3><span style="color: #ff0000;">1. Via WhatsApp : 0896-4684-8141</span></h3>
<h3><span style="color: #ff0000;">2. Via Email : ajoe354@gmail.com</span></h3>
<h3><span style="color: #ff0000;">3. Via Facebook : <a
href="https://web.facebook.com/angga.joe.amstrong">Angga Joe Amstrong</a><br /></span></h3>
<p> </p>
<p> <em>Tidak lupa kami ingatkan dalam pemesanan, harap cantumkan format <span style="color:
#ff0000;"><strong>"Pesan Vector"</strong></span> di awal pesan <span style="color:
#ff0000;">(wajib)</span>, untuk pelayanan yang lebih cepat.</em></p>
<p style="text-align: left;">Contoh : Pesan Vektor-Nama-Pilihan Vektor x (1,2,3)-Jenis Pembayaran-Note
Anda.</p>
<p style="text-align: left;"><strong>Like this :</strong></p>
<p style="text-align: left;"><em>Pesan Vektor-Angga Joe-Vektor 3-Transfer BRI- Slm likum mas joe,
gambar n bukti transfer sudah ane email</em></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: left;"><span style="color: #ff0000;"><strong>Opsi vektor :</strong></span></p>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;"> </div>
<div class="separator" style="clear: both; text-align: left;"> </div>
<div class="separator" style="clear: both; text-align: left;"> </div>
</div>

<div class="separator" style="clear: both; text-align: left;"><span style="text-align: left;">Tahap
selanjutnya, kirimkan gambar anda<br /></span></div>
<blockquote>
<ol>
<li style="text-align: left;">pertama silahkan kirimkan gambar ke email apakah memenuhi syarat atau
tidak, Kirim ke email <span style="color: #ff0000;"><a style="color: #ff0000;"
title="ajoe354@gmail.com" href="https://www.google.com/gmail/"
target="_blank">ajoe354@gmail.com</a></span></li>
<li style="text-align: left;">Untuk file gambar yang akan di kirim sebaiknya mempunyai Kualitas yang
HD agar saat di Zoom gambar tidak pecah + hasil vectornya bisa sempurna.</li>
<li style="text-align: left;"><strong><span style="font-weight: normal;"><span style="font-weight:
normal;">sesudah gambar anda kirim silahkan langsung konfirmasi ke <span style="color:
#cc0000;">Contact</span></span><span style="font-weight: normal;"> di atas agar segera saya
tindak lanjuti.</span></span></strong></li>
</ol>
</blockquote>
<div style="text-align: left;"> </div>
<div style="text-align: left;">Nah bila proses di atas selesai, nama anda akan saya masukkan daftar
<strong>Antrian</strong> untuk pendataan lebih lanjut, disini anda akan menemui 2 pilihan,<br />
<ol>
<li><span style="text-decoration: underline;"><strong>pilihan pertama</strong></span> bila saya lagi
<strong><span style="text-decoration: underline;">sepi orderan</span></strong> nama anda bakal masuk
urutan atas yang memungkinkan bisa langsung saya kerjakan</li>
<li><strong><span style="text-decoration: underline;">pilihan kedua</span></strong> bila ketika anda
pesan di saat orderan <strong><span style="text-decoration: underline;">numpuk-numpuk</span></strong>
terpaksa pesanan akan saya kerjakan sesuai antrian.</li>
</ol>
</div>
<p><br /><br /></p>
large;">Proses Pembayaran</span></strong></span></p>
<div><strong>Metode Pembayaran :</strong></div>
<ol>
<li style="text-align: left;"><span style="font-size: large;"><strong>Via Rekening <span style="color:
blue;">(BCA, Mandiri, BNI)</span></strong></span></li>
<li style="text-align: left;"><span style="font-size: large;"><strong>Via pulsa
</strong></span> <strong><span style="color: red; font-size:
large;">(Alternatif)</span></strong></li>
<li style="text-align: left;"><strong><span style="font-size: large;">Via Paypal <span style="color:
#ff0000;">(Alternatif)</span></span></strong></li>
</ol>
<div style="text-align: left;">Proses pembayaran bisa anda lakukan setelah melewati semua proses di
atas, kita sudah deal, silahkan kirim pembayaran sesuai metode yang anda pilih, untuk proses
pembayaran di lakukan sebelum Hari H Pemrosesan Vector.</div>
<div style="text-align: left;"><strong>Konfirmasi Pembayaran,</strong><br style="font-size: large;" />
<ul>
<li><strong>Via rekening </strong>: sertakan foto hasil transfer ke Contact yang anda pilih
(WA/SMS/IG/FB)</li>
<li><strong>Via Pulsa </strong>: Cukup Beritahu info pengiriman</li>
<li><strong>Via Paypal :</strong> Sertakan bukti screenshot pembayaran ke contact kami yang anda
pilih.</li>
</ul>
</div>
<div><br /> Setelah konfirmasi pembayaran, silahkan tunggu proses pengerjaan selesai sekitar 1-3 hari
kerja tergantung kerumitan, Vector jadi file langsung saya kirimkan Via Email dalam format .zip
pack <em><span style="color: #ff0000;">(berisi 3 file Vector utama + Vector dengan background
berbeda, Vector transparant)</span></em>.</div>
<div> </div>
<p style="text-align: center;">Contohnya seperti screenshot di bawah ini (salah satu pemesan Jasa
Vector JoeArt)</p>
<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-
right: 1em;"><img src="gambar/contact2.jpg" alt="" width="640" height="168" border="0" /></a></div>
<div><em>- sekian dan terima kasih</em></div>
</body>
</html>

10. Form Question & Answer
Source Code :
<html>
<head>
<title>A n Q</title>
</head>
<p><iframe src="https://www7.cbox.ws/box/?boxid=830961&boxtag=vaAfTy" width="100%" height="450"
allowtransparency="yes" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</p>
</body>
</html>
11. Form Logout
Source Code :
<?php
session_start();
session_destroy();
header("Location: index.php");
?>

Screenshot database MySql Localhost
Screenshot Email Pendaftaran website (harus tertera sesuai jadwal pelaksanaan UAS)

Screenshot konfigurasi web server pada hosting dan domain anda saat telah terdaftar di
hosting.
Screenshot database MySql yang telah dikirim ke hosting

Screenshot file manager untuk folder web pada hosting website anda
Screenshot hasil website anda yang telah berjalan di hosting

UAS WEB-JoeArt.Com

Recommended

Recommended

More Related Content

Similar to UAS WEB-JoeArt.Com

Similar to UAS WEB-JoeArt.Com (20)

More from Angga Joe Amstrong

More from Angga Joe Amstrong (7)

UAS WEB-JoeArt.Com