Assalamu'alaikum Wr. Wb.
A. Pendahuluan
Pada hari ini saya akan memulai project yang akan saya buat. Project ini berbentuk website, dimana berfungsi sebagai sarana informasi bagi para siswa dan guru agar dapat saling berkomunikasi. Dengan adanya project ini saya berharap dapat membantu pendidikan di indonesia dalam absensi, pemberian tugas, penjadwalan, dan yang paling penting lagi yaitu komunikasi antara guru dan murid.
B. Latar Belakang
Karena turunnya mutu pendidikan di indonesia, dan dampaknya pada prestasi yang diraih oleh siswa tidak sesuai harapan. Maka dari itu saya berinisiatif untuk membuat project ini.
C. Maksud & Tujuan
bertujuan agar sekolah, guru, murid dapat saling berkomunikasi dan saling bertukar informasi dengan mengunakan sebuah situs yang akan saya buat ini.
E. Pembahasan
Sebelumnya aku membuat website, Website ini masih saya fokuskan untuk pembuatan absensi untuk Sekolah. Nah website ini mungkin akan saya bangun dengan mengunakan kode HTML, CSS, Javascript, PHP, Bootstrap, Jquery, dan Mysqli.
Pada awalnya saya berfokus untuk membuat bagian admin untuk system absensi saya nah itu bentuknya seperti berikut ini :
Tampilan diatas adalah hasil yang saya buat selama seharian ini. Nah berikut ini adalah kodingan untuk membuat tampilan seperti gambar diatas.
- login.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
overflow-y: hidden;
user-select: none;
}
* {
box-sizing: border-box;
}
.bg-img {
background-image: url("img/main/bg3.jpg");
min-height: 676px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
right: 100px;
top: 150px;
margin: 20px;
border-radius: 10px;
max-width: 300px;
padding: 16px;
background-color: #00000069;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
h1, label, p {
color: #fff;
}
#a {
width: 100%;
}
p#b {
font-size: 30px;
position: relative;
left: 10px;
color: #000;
text-shadow: 4px 4px rgba(100, 100, 100, 0.8);
}
.c {
width: 600px;
position: relative;
height: 300px;
top: 220px;
left: 160px;
float: left;
}
p {
margin: 3px 0px;
}
</style>
</head>
<body>
<div class="bg-img">
<div class="c">
<img src="img/main/CSLogo.png" id="a">
<p id="b">The System For School</p>
</div>
<form action="action/ad_check.php" method="post">
<div class="container">
<h1>Login</h1>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="name" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pass" required>
<?php
if (isset($_GET['notice'])) {
if ($_GET['notice'] == "gagal") {
echo '<p style="font-size: 11px;">Login gagal! username dan password salah!</p>';
}
else if($_GET['notice'] == "logout"){
echo '<p style="font-size: 11px;">Anda telah berhasil logout</p>';
}
else if($_GET['notice'] == "belum_login"){
echo '<p style="font-size: 11px;">Anda harus login untuk mengakses halaman admin</p>';
}
}
?>
<button type="submit" class="btn" name="log" style="font-size:20px;">Login</button>
</div>
</form>
</div>
</body>
</html>
F. Referensi
- www.w3school.com
- duniailkom.com
Waalaikumsalam Wr. Wb.
No comments:
Post a Comment