Workshop PHP Indonesia Hari ke - 1 BLC Telkom Klaten
Pada hari Minggu 13 Januari teman - teman dari komunitas PHP Indonesia khususnya daerah Joglo Raya mengadakan workshop atau sharing ke BLC TELKOM KLATEN . Pada hari pertama ini kami membahas HTML dan CSS Dasar ,pada sesi pertama kita membahas tentang HTML . Berikut hasil sharing HTML yang kita dapatkan
Pertama Kita membuat halaman login perpustakaan . tanpa CSS berikut tampilanya
Berikut adalah script HTML Login tersebut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login SI Perpus</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form method="post" name="form_login" id="form_login" style="margin-top: 120px;">
<table class="form">
<tr>
<td colspan="2">
<h1 align="center">Login Petugas</h1>
</td>
</tr>
<tr>
<td>Username</td>
<td>
<input type="text" name="username" id="username" required/>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password" id="password" required/>
</td>
</tr>
<tr style="height:10px"></tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="login" id="login" value="Login" class="btn btn-submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Dan pada tahap kedua kita memberikan sentuhan CSS agar halaman tersebut menjadi lebih cantik
Dan halaman login tersebut masih berupa file html jadi kita tidak membuat session login php. Selanjutnya kita membuat halaman adminya menggunakan CSS
Berikut adalah script CSS yang diajarkan oleh teman - teman dari PHP Indonesia Joglo Raya
*{
font-family: sans-serif;
font-weight: 100;
}
.container {
width: 960px;
max-width: 100%;
margin: 0 auto;
background: #42775A;
border-radius: 5px;
padding: 10px;
box-shadow: 0px 0px 5px black;
color: #FFF;
}
.sidebar {
width: 20%;
float: left;
}
.sidebar ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.sidebar li a {
display: inline-block;
width: 100%;
padding: 15px;
box-sizing: border-box;
}
.sidebar li a:hover {
background-color: #3B5949;
}
.sidebar li a.active{
background-color: #3B5949;
}
a {
text-decoration: none;
color: #FFF;
}
.content {
width: 80%;
min-height: 500px;
float: right;
padding: 10px;
box-sizing: border-box;
background: #FFF;
border-radius: 5px;
color: #2c3e50;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
body{
margin: 0;
background : #798E82;
}
/*tabel*/
table.data {
width: 100%;
border-collapse: collapse;
}
table.data th {
padding: 10px 5px;
}
table.data td {
padding: 10px 5px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
table.data td a.link {
color: #3F27E6;
text-decoration: underline;
}
table.data td a.link:hover {
color: #347FF7;
text-decoration: underline;
}
table.data tr:hover:not(:first-child) {
background-color: #f5f5f5;
}
table.data tr:not(:first-child):nth-of-type(odd) {
background-color: #f9f9f9;
}
/*form*/
.form{
background: #42775A;
border-radius: 5px;
padding: 4px 20px 15px 20px;
box-shadow: 0px 0px 5px black;
color: #FFF;
margin: 0 auto;
width: 430px;
}
input, textarea, select {
width: 100%;
padding: 10px 5px;
box-sizing: border-box;
font-size: large;
}
textarea {
min-height: 80px;
}
.btn {
width: auto;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
}
.btn-submit {
background-color: #C35045;
}
.btn-submit:hover {
background-color: #CA665C;
}
.btn-tambah {
background-color: #27ae60;
}
.btn-tambah-div{
text-align: right;
margin-right: 20px;
}
.btn-tambah:hover {
background-color: #2ecc71;
}
.btn-edit {
background-color: #2980b9;
}
.btn-edit:hover{
background-color: #5DA7D8;
}
.btn-hapus {
background-color: #c0392b;
}
.btn-hapus:hover {
background-color: #CE5A4E;
}
Untuk HTMLnya saya kira terlalu banyak dan saya tidak dapat menuliskanya. Berikut sedikit dokumentasi dari PHP Indonesia kemarin
HASIL & KESIMPULAN
Kita dapat memperdalam dan lebih memahami syntax dari HTML Dan CSS yang diarahkan oleh teman - teman dari PHP Indonesia saya merasa senang dengan adanya Workshop PHP Indonesia karena saya mendapatkan teman untuk sharing dan juga pengetahuan saya semakin bertambah.
Tidak ada komentar :
Posting Komentar