Aplikasi Berbasis Web || Biodata Siswa || #1 || Source Code
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membuat suatu aplikasi berbasis web, aplikasi yang saya buat adalah aplikasi Biodata Siswa, Aplikasi Ini dapat Diterapkan Disekolah-sekolah,Aplikasi ini dapat digunakan untuk informasi identitas siswa di halaman raport,Sehingga aplikasi ini dapat mempermudah guru dalam mencari identitas siswanya
Latar Belakang
Banyak Guru yang kesulitan dalam memasukkan data siswa, sehingga dengan adanya aplikasi ini siswa dapat mengisi identitasnya sendiri dengan benar, yang nantinya akan digunakan untuk biodata Raport mereka
Maksud Dan Tujuan
Untuk Mempermudah Guru Maupun siswa melihat data diri siswa disekolahnya
Jangka Waktu Yang Dibutuhkan
3 Jam
Alat Dan Bahan
Teks Editor ( Sublime Teks )
Browser ( Chrome )
Langah Kerja
Nah Di hari ini saya memfokuskan dalam pembuatan tampilan Awal ( FrontEnd ), Tampilan FrontEnd ini dibuat dengan Html Dan Css, Karena Tampilan Awal Ini merupakan Tampilan Yang Pertama Kali Dilihat Oleh Siswa Maka Dari Itu Saya Juga Membuat Integrasi dengan Website,Portal Maupun Galery, Sehingga Siswa Tidak Hanya Mengisi Biodata, Melainkan Siswa Juga Dapat Langsung Menuju Ke Website Sekolah, Portal Dan Galery,
Untuk Hasilnya Seperti Ini :
Nah Tampilan Diatas Hanya Menggunakan Html Dan Css, Berikut Source Code nya :
Simpan Souce code ini di file index.php
Nah Setelah itu simpan file Script dibawah di file style.css
Dalam Pembuatan bagian frontEnd ini dibutuhkan pemahaman tentang html dan css agar mudah dalam pengkodean html dan css
Sekian yang dapat saya sampaikan hari ini, mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa sekian dan terima kasih
Wassalamu'alikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membuat suatu aplikasi berbasis web, aplikasi yang saya buat adalah aplikasi Biodata Siswa, Aplikasi Ini dapat Diterapkan Disekolah-sekolah,Aplikasi ini dapat digunakan untuk informasi identitas siswa di halaman raport,Sehingga aplikasi ini dapat mempermudah guru dalam mencari identitas siswanya
Latar Belakang
Banyak Guru yang kesulitan dalam memasukkan data siswa, sehingga dengan adanya aplikasi ini siswa dapat mengisi identitasnya sendiri dengan benar, yang nantinya akan digunakan untuk biodata Raport mereka
Maksud Dan Tujuan
Untuk Mempermudah Guru Maupun siswa melihat data diri siswa disekolahnya
Jangka Waktu Yang Dibutuhkan
3 Jam
Alat Dan Bahan
Teks Editor ( Sublime Teks )
Browser ( Chrome )
Langah Kerja
Nah Di hari ini saya memfokuskan dalam pembuatan tampilan Awal ( FrontEnd ), Tampilan FrontEnd ini dibuat dengan Html Dan Css, Karena Tampilan Awal Ini merupakan Tampilan Yang Pertama Kali Dilihat Oleh Siswa Maka Dari Itu Saya Juga Membuat Integrasi dengan Website,Portal Maupun Galery, Sehingga Siswa Tidak Hanya Mengisi Biodata, Melainkan Siswa Juga Dapat Langsung Menuju Ke Website Sekolah, Portal Dan Galery,
Untuk Hasilnya Seperti Ini :
Nah Tampilan Diatas Hanya Menggunakan Html Dan Css, Berikut Source Code nya :
Simpan Souce code ini di file index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Biodata Siswa || ZnSystem</title>
<link rel="stylesheet" href="asset/style.css">
</head>
<body>
<div class="wrapper">
<div class="head-img">
<div class="button">
<button class="bt">Website</button>
<button class="bt">Galery</button>
<button class="bt">Portal</button>
<a href="admin/login.php"><button class="btu">Login</button></a>
</div>
<div class="kot">
<img style="width: 80px;margin-left: 195px" src="img/LOG.png" alt="">
<center style="color: white">
<h2>BIODATA SISWA BY ZNSYSTEM</h2><br/>
<P style="margin-top: -20px">BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<h3> ( SMK TAMANSISWA ) </h3>
<h4>Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908</h4>
<h4 style="margin-bottom: -70px;">MOJOAGUNG KAB.JOMBANG</h4>
<a href="data"><button class="btn">ISI BIODATA</button></a>
</center>
</div>
</div>
<div class="box">
<div class="kotak1">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/website.png" alt="">
</div>
<div class="kotak2">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/galery.png" alt="">
</div>
<div class="kotak3">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/portal.png" alt="">
</div>
</div>
</div>
<div class="footer-atas">
<div class="col-1">
<img style="width: 100px;margin-left: 170px;margin-top: 40px;" src="img/LOG.png" alt="">
<p style="text-align: center;color: white">Tentang ZnSystem</p>
<button style="width: 80px;margin-left: 80px;margin-top: 10px;background: blue;border:2px solid blue;color: white;cursor: pointer;">Facebook</button>
<button style="width: 80px;background: #499F36FF;border:2px solid #499F36FF;color: white;cursor: pointer;">Website</button>
<button style="width: 80px;background: red;border:2px solid red;color: white;cursor: pointer;">Email</button>
</div>
<div class="col-2">
<h4 style="font-size:20px;color: white;margin-top: 30px;font-weight: bold;border-bottom: 1px solid white;text-align: center;">Contact</h4>
<ul>
<li style="margin-top: 20px;">No.Tlp : 08911227822377</li>
</ul>
<ul>
<li>Email : ZnSystem@gmail.com</li>
</ul>
<ul>
<li>Yahoo : ZaenZnSystem@yahoo.co.id</li>
</ul>
</div>
<div class="col-3">
<h4 style="font-size:20px;color: white;margin-top: 30px;font-weight: bold;border-bottom: 1px solid white;text-align: center;">About</h4>
<ul>
<li style="margin-top: 20px;">Portal</li>
</ul>
<ul>
<li>Galery</li>
</ul>
<ul>
<li>Pengumuman</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<h4 style="color: white;text-align: center;line-height: 50px;font-weight: initial;">Copyright © 2018 ZnSystem || Developed By Ahmad Zaenuri Ferdiansyah</h4>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Biodata Siswa || ZnSystem</title>
<link rel="stylesheet" href="asset/style.css">
</head>
<body>
<div class="wrapper">
<div class="head-img">
<div class="button">
<button class="bt">Website</button>
<button class="bt">Galery</button>
<button class="bt">Portal</button>
<a href="admin/login.php"><button class="btu">Login</button></a>
</div>
<div class="kot">
<img style="width: 80px;margin-left: 195px" src="img/LOG.png" alt="">
<center style="color: white">
<h2>BIODATA SISWA BY ZNSYSTEM</h2><br/>
<P style="margin-top: -20px">BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<h3> ( SMK TAMANSISWA ) </h3>
<h4>Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908</h4>
<h4 style="margin-bottom: -70px;">MOJOAGUNG KAB.JOMBANG</h4>
<a href="data"><button class="btn">ISI BIODATA</button></a>
</center>
</div>
</div>
<div class="box">
<div class="kotak1">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/website.png" alt="">
</div>
<div class="kotak2">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/galery.png" alt="">
</div>
<div class="kotak3">
<img style="width: 150px;margin-top: -15px;margin-left: 20px;cursor: pointer;" src="img/portal.png" alt="">
</div>
</div>
</div>
<div class="footer-atas">
<div class="col-1">
<img style="width: 100px;margin-left: 170px;margin-top: 40px;" src="img/LOG.png" alt="">
<p style="text-align: center;color: white">Tentang ZnSystem</p>
<button style="width: 80px;margin-left: 80px;margin-top: 10px;background: blue;border:2px solid blue;color: white;cursor: pointer;">Facebook</button>
<button style="width: 80px;background: #499F36FF;border:2px solid #499F36FF;color: white;cursor: pointer;">Website</button>
<button style="width: 80px;background: red;border:2px solid red;color: white;cursor: pointer;">Email</button>
</div>
<div class="col-2">
<h4 style="font-size:20px;color: white;margin-top: 30px;font-weight: bold;border-bottom: 1px solid white;text-align: center;">Contact</h4>
<ul>
<li style="margin-top: 20px;">No.Tlp : 08911227822377</li>
</ul>
<ul>
<li>Email : ZnSystem@gmail.com</li>
</ul>
<ul>
<li>Yahoo : ZaenZnSystem@yahoo.co.id</li>
</ul>
</div>
<div class="col-3">
<h4 style="font-size:20px;color: white;margin-top: 30px;font-weight: bold;border-bottom: 1px solid white;text-align: center;">About</h4>
<ul>
<li style="margin-top: 20px;">Portal</li>
</ul>
<ul>
<li>Galery</li>
</ul>
<ul>
<li>Pengumuman</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<h4 style="color: white;text-align: center;line-height: 50px;font-weight: initial;">Copyright © 2018 ZnSystem || Developed By Ahmad Zaenuri Ferdiansyah</h4>
</div>
</body>
</html>
Nah Setelah itu simpan file Script dibawah di file style.css
* {
padding: 0;
margin: 0;
}
body {
background: #D1D1D1FF;
}
.wrapper {
width: 100%;
height: 800px;
background: white;
}
.head-img {
width: 100%;
height: 550px;
width:100%;
background-image:url(../img/back.jpg);
background-size:cover;
background-repeat:no-repeat;
}
.kot {
width: 450px;
height: 300px;
margin: auto;
padding-top: 120px;
}
.box {
width: 700px;
height: 200px;
background:white;
margin:-80px auto;
box-shadow:0px 1px 15px 2px grey;
border-top: 4px solid black;
border-radius: 20px;
}
.kotak1 {
width: 200px;
height: 200px;
float: left;
margin-left: 40px;
}
.kotak2 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
.kotak3 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
.footer-atas {
width: 100%;
height: 300px;
background: #393939FF;
}
.footer {
width: 100%;
height: 50px;
background: #272727FF;
border-top: 1px solid white;
}
.col-1 {
width: 30%;
height: 300px;
float: left;
border-right: 1px solid grey;
}
.col-2 {
width: 20%;
height: 300px;
float: left;
margin-left: 150px;
}
.col-3 {
width: 20%;
height: 300px;
float: left;
margin-left: 120px;
}
.col-2 ul li {
color: white;
}
.col-3 ul li {
color: white;
}
.btn {
margin-top: 100px;
width: 100px;
height: 30px;
border-radius: 20px;
border:none;
background: white;
font-weight: bold;
cursor: pointer;
}
.btn:hover {
background: #686868FF;
color: white;
}
.button {
width: 500px;
height: 40px;
float: right;
margin-top: 30px;
}
.bt {
width: 80px;
height: 30px;
border-radius: 20px;
background: none;
border:2px solid white;
color: white;
margin-left: 20px;
cursor: pointer;
}
.bt:hover {
background: white;
color: black;
}
.btu {
width: 80px;
height: 30px;
border-radius: 20px;
background: white;
border:2px solid white;
color: black;
margin-left: 20px;
font-weight: bold;
cursor: pointer;
}
padding: 0;
margin: 0;
}
body {
background: #D1D1D1FF;
}
.wrapper {
width: 100%;
height: 800px;
background: white;
}
.head-img {
width: 100%;
height: 550px;
width:100%;
background-image:url(../img/back.jpg);
background-size:cover;
background-repeat:no-repeat;
}
.kot {
width: 450px;
height: 300px;
margin: auto;
padding-top: 120px;
}
.box {
width: 700px;
height: 200px;
background:white;
margin:-80px auto;
box-shadow:0px 1px 15px 2px grey;
border-top: 4px solid black;
border-radius: 20px;
}
.kotak1 {
width: 200px;
height: 200px;
float: left;
margin-left: 40px;
}
.kotak2 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
.kotak3 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
.footer-atas {
width: 100%;
height: 300px;
background: #393939FF;
}
.footer {
width: 100%;
height: 50px;
background: #272727FF;
border-top: 1px solid white;
}
.col-1 {
width: 30%;
height: 300px;
float: left;
border-right: 1px solid grey;
}
.col-2 {
width: 20%;
height: 300px;
float: left;
margin-left: 150px;
}
.col-3 {
width: 20%;
height: 300px;
float: left;
margin-left: 120px;
}
.col-2 ul li {
color: white;
}
.col-3 ul li {
color: white;
}
.btn {
margin-top: 100px;
width: 100px;
height: 30px;
border-radius: 20px;
border:none;
background: white;
font-weight: bold;
cursor: pointer;
}
.btn:hover {
background: #686868FF;
color: white;
}
.button {
width: 500px;
height: 40px;
float: right;
margin-top: 30px;
}
.bt {
width: 80px;
height: 30px;
border-radius: 20px;
background: none;
border:2px solid white;
color: white;
margin-left: 20px;
cursor: pointer;
}
.bt:hover {
background: white;
color: black;
}
.btu {
width: 80px;
height: 30px;
border-radius: 20px;
background: white;
border:2px solid white;
color: black;
margin-left: 20px;
font-weight: bold;
cursor: pointer;
}
Dalam Pembuatan bagian frontEnd ini dibutuhkan pemahaman tentang html dan css agar mudah dalam pengkodean html dan css
Sekian yang dapat saya sampaikan hari ini, mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa sekian dan terima kasih
Wassalamu'alikum Wr.Wb
