Tugas PWeb - Membuat Form Registrasi Laman Berita
Nama: Donny Fitrado
NRP: 05111740000171
Kelas: PWeb C
Di dalam tugas ini, saya membuat sebuah website berita, dimana orang-orang juga bisa mendaftarkan diri mereka menjadi member di dalam website itu. Hal ini dilakukan dengan menggunakan registration form.
html front page laman berita:
html page registrasi:
css:
Berikut ini adalah dokumentasinya ketika laman dibuka:
Ketika menu registration diklik:
Terima kasih, dan mohon maaf apabila ada kesalahan...
NRP: 05111740000171
Kelas: PWeb C
Di dalam tugas ini, saya membuat sebuah website berita, dimana orang-orang juga bisa mendaftarkan diri mereka menjadi member di dalam website itu. Hal ini dilakukan dengan menggunakan registration form.
html front page laman berita:
<!DOCTYPE html>
<html>
<head>
<title>DonNews - Fresh News, Everyday</title>
<link rel="stylesheet" href="customweb.css"/>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Job</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="menu1">
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Writers</a></li>
<li><a href="registrasi.html">Registration</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://drive.google.com/open?id=1-vjR3z8bvfE_HihV6ymvAfw23fMzAtCM" style=" float: left; width: 300px;height: 200px;">
<h3>Buntut Tewasnya Haringga, Bobotoh Diingatkan soal Hakikat Sepak Bola </h3>
<p>Jajaran petinggi Polres - TNI Kabupaten Garut, Jawa Barat, mengumpulkan Bobotoh dan Viking, seluruh distrik Garut, untuk melakukan pembinaan para pendukung setia klub Persib Bandung, yang berasal dari kota dodol....</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://drive.google.com/open?id=1E1RsnPOwVX4arRiXry6yDJ3PZmaK6Aih" style="float: left;width: 300px;height: 200px;">
<h3>Hoaks Merajalela Jelang Pilpres 2019, Siapa Memancing di Air Keruh?</h3>
<p>Kabar-kabar terkait Pilpres 2019 ini mungkin sedang beredar di aplikasi perpesanan maupun media sosial yang Anda miliki: percakapan mesra yang konon dilakukan seorang cawapres dengan artis cantik.......</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://drive.google.com/open?id=1JFilNNZL6TPVXFs8w063im_Ild5gWW_o" style="float: left;width: 300px;height: 200px;">
<h3>MA Perberat Hukuman Andi Narogong Jadi 13 Tahun</h3>
<p>Mahkamah Agung (MA) memperberat vonis Andi Agustinus alias Andi Narogong menjadi 13 tahun penjara dalam kasus korupsi e-KTP. Putusan itu lebih tinggi dibandingkan di tingkat banding, yaitu 11 tahun penjara....</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
</div>
<!-- kiri-->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h2>Put your ads here!</h2>
<img src="https://drive.google.com/open?id=1O9tkwrgZAwiLBs6XIN5uIn6K_brZ-ZIx" style="float: left;width: 34px;height: 34px;">
<h1>300x250 ads</h1>
<p>Contact us!</p>
<img src="https://drive.google.com/open?id=1O9tkwrgZAwiLBs6XIN5uIn6K_brZ-ZIx" style="float: left;width: 34px;height: 34px;">
<h1>300x250 ads</h1>
<p>Contact us!</p>
<img src="https://drive.google.com/open?id=1O9tkwrgZAwiLBs6XIN5uIn6K_brZ-ZIx" style="float: left;width: 34px;height: 34px;">
<h1>300x250 ads</h1>
<p>Contact us!</p>
</div>
<div class="footer" >
<h2>Copyright 2018 DonNews</h2>
</div>
</div>
<!-- kanan -->
</div>
</div>
</body>
</html>
html page registrasi:
<!DOCTYPE html>
<html>
<head>
<title>DonNews - Fresh News, Everyday</title>
<link rel="stylesheet" href="customweb.css"/>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Job</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="menu1">
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Writers</a></li>
<li><a href="registrasi.html">Registration</a></li>
</ul>
</div>
</div>
<div class="content">
<h3 align="center">Registration Form</h3>
<hr/>
<br/>
<br/>
<br/>
<form>
<table width="600" height="550" align="center">
<tr>
<td width="272">Full Name</td>
<td width="343"><input type="text" name="nama" placeholder="Nama Lengkap Anda" maxlength="50" required/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Nama Jalan, Nomor, Kota" name="address" required/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" placeholder="Masukkan alamat email" name="email" required/></td>
</tr>
<tr>
<td>Handphone number</td>
<td><input type="text" placeholder="Masukkan nomor HP" name="phone" min="10" max="12" required/></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="text" name="gender" list="gender"/>
<datalist id="gender">
<option value="Man">Laki-laki</option>
<option value="Woman">Perempuan</option>
</datalist>
</td>
</tr>
<tr>
<td>Favorite News Section</td>
<td><input type="text" name="berita" list="berita"/>
<datalist id="berita">
<option value="Sport"></option>
<option value="Technology"></option>
<option value="Politics"></option>
<option value="Economy"></option>
<option value="Others"></option>
</datalist>
</td>
</tr>
<tr>
<td>
<label for="pass"><b>Password</b></label></td>
<td>
<input type="password" placeholder="Enter Password" name="pass" required>
</td>
</tr>
<tr>
<td align="center"><button type="button" onclick="document.getElementById('signup').style.display='none'" id="cancel"><a href="homeregis.html">Home</a></button>
</td>
<td align="center"> <button type="submit" id="submit">Sign Up</button></td>
</tr>
</table>
</form>
</div>
<div class="footer">
<div class="jarak">
<p align="center">Copyright 2018 DonNews</p>
css:
body{
background: #D8BFD8;
color: #333;
/* width: 100% ;
height: 100%;*/
font-family: "lato", cursive, sans-serif;
/*margin: 0 auto;*/
}
.content{
width: 88%;
margin: auto;
/*height: 420px;*/
padding: 0.1px;
background: #fff;
color: #333;
}
.header{
margin: 0;
background: #fff;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #fff;
/*height: 420px;*/
}
.kanan{
width: 25%;
float: left;
margin: auto;
background: #fff;
/*height: 420px;*/
}
.border{
/*border: 2px solid #000;*/
height: 200px;
margin-top: 1pc;
padding-bottom: 3pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
.footer{
/*width: 90%;*/
margin: auto;
height: 40px;
line-height: 40px;
background: #BA55D3;
}
.menu{
background-color: #BA55D3;
height: 50px;
line-height: 50px;
/*position: relative;*/
/*width: 90%;*/
/*margin: 0;*/
/*padding:0;*/
}
.menu1{
background-color: #fff;
height: 60px;
line-height: 60px;
/*position: relative;*/
/*width: 90%;*/
margin: 0;
/*padding:0 auto;*/
}
.jarak{
padding: 0 2pc;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu ul li a:hover{
background-color: #DDDCDC;
display:block;
}
.menu1 ul{
list-style: none;
}
.menu1 ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu1 ul li a:hover{
background-color: #FAF9F9;
display:block;
}
.kanan p{
font-size: 12px;
margin: 0;
text-align:center;
margin: 10px;
color:#D9D8D8;
}
h3{
font-family: "Lucida Console";
font-weight: bold;
font-size: 24px;
}
p{
font-family: "Verdana";
font-size: 14px;
font-weight: lighter;
color: #ADACAC;
}
h1{
font-family: "Verdana";
font-size: 13px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
h2{
font-family: "Lucida Console";
font-weight: lighter;
font-size: 12px;
}
button[id="submit"]
{
height: 36px;
width: 81px;
color: white;
background-color:#DDDCDC;
}
button[id="cancel"]{
height: 36px;
width: 81px;
color: white;
background-color:#DDDCDC;
}
input[type="text"] {
width: 500px;
height: 50px;
margin-bottom: 10px;
background-color: #DDDCDC;
}
input[type="password"]
{
width: 500px;
height: 20px;
margin-bottom: 10px;
background-color: #DDDCDC;
}
Berikut ini adalah dokumentasinya ketika laman dibuka:
Ketika menu registration diklik:
Terima kasih, dan mohon maaf apabila ada kesalahan...
Comments
Post a Comment