Assalamu'alaikum Wr. Wb.
A. PendahuluanPada 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.
- File admin.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EUESystem - School Management System</title>
<?php
include 'main-body-assets/css.html';
?>
<style type="text/css">
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.z-menu {
height: 529px;
list-style-type: none;
padding: 0;
margin: 0;
}
.z-menu li a {
padding: 12px;
text-decoration: none;
font-size: 18px;
color: #fff;
display: block
}
.z-menu li a:hover {
background-color: #37474f;
}
ul.z-menu li ul {
list-style-type: none;
padding-left: 0px;
}
ul.z-menu li ul li a {
padding-left: 30px;
font-size: 16px;
}
</style>
<script>
$(document).ready(function(){
<?php
for ($i=0; $i < 5 ; $i++) {
echo '
$("#f'.$i.'").click(function(){
$("#s'.$i.'").toggle();
});
';
}
?>
});
</script>
</head>
<body style="overflow-y: hidden;">
<?php
include 'main-body-assets/header.html';
?>
<div class="z-content container-fluid">
<div class="row" >
<div class="col-md-3 zaza" style="background-color: #102027; padding: 0px; overflow-y: scroll; height: 612px;">
<div class="ads-page">
<div class="ads-img"></div>
<div class="ads-pro">
<h4><?php echo $_SESSION['username']; ?></h4>
<p>Administrator</p>
<div class="closed"><a href="action/ad_logout.php">Logout</a></div>
</div>
</div>
<h3 style="padding: 10px;color: #fff; ">Menu Admin</h3>
<ul class="z-menu" style="height: auto;" >
<li ><a href="#" id="f0">School<i class="fa fa-caret-down" style="float: right;"></i></a>
<ul class="dropdown-container" id="s0">
<li><a href="#">School Profile</a></li>
<li><a href="#">School Vision And Mission</a></li>
<li><a href="#">School History</a></li>
<li><a href="#">Strukur Sekolah</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
<li><a href="#">Student</a></li>
<li><a href="#">Teacher</a></li>
<li><a href="#">Class</a></li>
<li><a href="#">Vocational</a></li>
<li><a href="#">Absentc</a></li>
<li><a href="#">School Maps</a></li>
<li ><a href="#" id="f1">Admin</a></li>
</ul>
</div>
<?php
include 'admin/admin-cr.php';
?>
</div>
</div>
</div>
<div class="z-footer">
</div>
</body>
</html>
- main-body-assets/css.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/main/main.css">
<link rel="stylesheet" type="text/css" href="assets/main/admin.css">
- assets/main/main.css
.ads-page {
width: 100%;
height: 100px;
padding-top: 10px;
padding-left: 10px;
}
.ads-pro {
width: 70%;
height: 80px;
margin-left: 10px;
float: left;border-radius: 5px;
background-color: #fff;
}
.ads-page p, .ads-page h4 {
padding-left: 10px;
}
.ads-page p {
margin: 0;
}
.closed {
background-color: #ccc;
text-align: center;
position: relative;
width: 60px;
bottom: 5px;
padding: 3px;
border-radius: 0px 0px 5px 0px;
float: right;
}
.ads-img {
float: left;
width: 70px;
height: 70px;
background-color: #fff;
background-size: 100%;
border: 1px solid #ccc;
border-radius: 50%;
}
.table1 tbody tr td {
vertical-align: middle !important;
}
- assets/main/admin.css
body {
background-color: #f5f5f5;
}
.z-header {
padding: 10px 10px 0px 10px;
}
.z-header img {
width: 40px;
float: left;
}
.z-header h1 {
float: left;
}
.z-nav {
margin-left: 25px;
margin-top: 25px;
float: left;
}
body {
margin: 0;
font-family: Arial, Helvetica;
}
.topnav {
overflow: hidden;
background-color:#0086c3;
}
.topnav a {
float: right;
display: block;
color: #ffffff;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #63ccff;
color: black;
}
.active {
background-color: #202831;
color: #fff;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) { display: none; }
.topnav a.ico {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#z-logo {
height: 100%;
width: 300px;
float: left;
padding: 10px;
}
#z-logo img {
height:40px;
float: left;
}
#z-logo h2 {
padding-top: 10px;
color: #fff;
margin: 0;
margin-left: 30px;
}
.zaza::-webkit-scrollbar {
width: 5px;
}
.zaza::-webkit-scrollbar-track {
background: #f1f1f1;
}
.zaza::-webkit-scrollbar-thumb {
background: #888;
}
.zaza::-webkit-scrollbar-thumb:hover {
background: #555;
}
- main-body-assets/header.html
<div class="container-fluid" style="padding: 0;">
<div class="topnav" id="nav">
<div id="z-logo">
<img src="img/main/CSLogo.png">
</div>
<a href="#home" class="active">Home</a>
<a href="#news">Info</a>
<a href="#contact">Sekolah</a>
<a href="#about">Absensi</a>
<a href="javascript:void( 0);" class="icon" onclick="z-nav()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
- admin/admin-cr.php
<div class="col-md-9" style="background-color: #eee;">F. Referensi
<h2 style="border-bottom: 2px solid black; margin-bottom: 20px;">Administrator Create User</h2>
<form method="post" action="action/ad_add.php" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="SchoolName">Username :</label>
<input type="text" class="form-control" id="Username" name="Username">
</div>
<div class="form-group">
<label for="TypeOfSchool">Password :</label>
<input type="password" class="form-control" id="Password" name="Password">
</div>
<div class="form-group">
<label for="SchoolName">Email :</label>
<input type="email" class="form-control" id="Email" name="Email">
</div>
<div class="form-group">
<label for="FoundedOn">Full Name :</label>
<input type="text" class="form-control" id="FullName" name="FullName">
</div>
<div class="form-group">
<label for="FoundedOn">Nick Name :</label>
<input type="text" class="form-control" id="NickName" name="NickName">
</div>
<div class="form-group">
<label for="SchoolStatisticsNumber">Permission :</label>
<select name="Permission" class="form-control">
<option value="Article">Article</option>
<option value="Attendance">Attendance</option>
</select>
</div>
<div class="form-group">
<label for="PrincipalNumberOfNationalSchool">Phone :</label>
<input type="text" class="form-control" id="Phone" name="Phone">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="EducationCurriculum">User Image :</label>
<div class="displaylogo" style="background-image: url(img/main/n.png);">
<img src="">
</div>
<input type="file" class="form-control" name="UserImage" >
</div>
<div class="form-group">
<label for="Status">Address :</label>
<textarea class="form-control" rows="5" id="comment" name="Address"></textarea>
</div>
<div class="form-group">
<input type="submit" class="form-control smschool" name="ad-add">
</div>
</div>
</div>
</form>
</div>
</div>
- www.w3school.com
- duniailkom.com
No comments:
Post a Comment