Membuat Web Responsive
Tujuan
- Mengetahui cara membuat Web Responsive
- Mengetahui Apa Itu Web Responsive
Konsep Dasar
Web ResponsiveDesain Web Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun PC. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer dengan monitor yang lebih besar.
Langkah Kerja
Berikut script cara membuat web responsive
-Script php
-Script php
<?php
session_start();
if (isset($_SESSION['username']) || !empty ($_SESSION['username'])){
header ("location:blog.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEMPLATE LOGIN | 1</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>
<body>
<div id="login">
<div class="center">
<h2>Login</h2>
<form class="f1" action="" method="post">
<input class="itpw" type="text" name="username" placeholder="Username or Email"><br>
<input class="itpw" type="password" name="password" placeholder="Password"><br>
<input class="its" type="submit" name="login" value="LOGIN"><br>
<!-- proses login -->
<?php
if (isset($_POST['login'])){
$username = $_POST['username'];
$filter = stripslashes(strip_tags(htmlspecialchars($_POST['username'] , ENT_QUOTES )));
$password = md5($_POST['password']);
//inisialisasi user dan password
$user = 'xirpl1';
$key = md5('smkn13bandung');
if ((!empty($username) && !empty($password))) {
if ($username == $user && $password == $key){
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
//dialihkan kehalaman utama
header("location:blog.php");
}else {
echo "<p style='color:red;font-size:13px;margin:2px auto;'>(*) Username dan Password Salah. </p>";
}
}else{
echo "<p style='color:red;font-size:13px;margin:2px auto;'>(*) Silahkan isi Form yang telah tersedia. </p>";
}
}
?>
</form>
<p><a href="#">Forget your Password? </a> | <a href="#">Created an account</a> </p>
</div>
</div>
</body>
</html>
session_start();
if (isset($_SESSION['username']) || !empty ($_SESSION['username'])){
header ("location:blog.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEMPLATE LOGIN | 1</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>
<body>
<div id="login">
<div class="center">
<h2>Login</h2>
<form class="f1" action="" method="post">
<input class="itpw" type="text" name="username" placeholder="Username or Email"><br>
<input class="itpw" type="password" name="password" placeholder="Password"><br>
<input class="its" type="submit" name="login" value="LOGIN"><br>
<!-- proses login -->
<?php
if (isset($_POST['login'])){
$username = $_POST['username'];
$filter = stripslashes(strip_tags(htmlspecialchars($_POST['username'] , ENT_QUOTES )));
$password = md5($_POST['password']);
//inisialisasi user dan password
$user = 'xirpl1';
$key = md5('smkn13bandung');
if ((!empty($username) && !empty($password))) {
if ($username == $user && $password == $key){
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
//dialihkan kehalaman utama
header("location:blog.php");
}else {
echo "<p style='color:red;font-size:13px;margin:2px auto;'>(*) Username dan Password Salah. </p>";
}
}else{
echo "<p style='color:red;font-size:13px;margin:2px auto;'>(*) Silahkan isi Form yang telah tersedia. </p>";
}
}
?>
</form>
<p><a href="#">Forget your Password? </a> | <a href="#">Created an account</a> </p>
</div>
</div>
</body>
</html>
-Script css
* {
padding : 0px;
margin : 0px;
font-family: arial;
}
#login {
width: 100%;
height: 100vh;
background-image: url("img/justice_league_4k_8k-HD.jpg");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.center {
width: 350px;
height: auto;
margin: 0 auto;
margin-top: 100px;
background-color: #f0f0f0;
box-shadow: 2px 2px 16px 0px #757575;
padding: 40px;
}
.center h2 {
font-size: 40px;
text-align: center;
color: #757575;
padding-bottom: 40px;
}
.f1 {
width: 100%;
}
.itpw {
width: 92%;
padding: 13px 10px;
margin: 5px 0px;
background-color: #dbdbdb;
border: 3px solid #dbdbdb;
color: #757575;
transition: all 0.7s;
}
.its {
width: 99.7%;
font-size: : 19px;
color: : #f5f5f5;
padding: 12px;
margin: 5px 0;
background-color: #004d40;
border: none;
transition: all 0.4s;
}
.itpw:focus {
border-bottom: 3px solid #004d40;
color: #004d40 ;
}
.its:hover , its:focus {
opacity: 0.7;
cursor: pointer;
}
.center p {
margin: 20px 0;
text-align: center;
font-size: 14px;
}
.center p a {
color: #757575;
}
@media screen and (min-width: 1500px) {
.center{
width: 350px;
}
}
@media screen and (max-width: 900px){
#login {
background-size: 100% 100%;
}
.its {
width: 100%
}
.itpw {
font-size: 14px;
width: 90%;
padding: 13px 3%;
}
.center {
width: 230px;
}
.center p{
font-size: 12px;
}
}
@media screen and (max-width: 350px){
.center {
padding: 20px;
width: 75%;
}
}
padding : 0px;
margin : 0px;
font-family: arial;
}
#login {
width: 100%;
height: 100vh;
background-image: url("img/justice_league_4k_8k-HD.jpg");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.center {
width: 350px;
height: auto;
margin: 0 auto;
margin-top: 100px;
background-color: #f0f0f0;
box-shadow: 2px 2px 16px 0px #757575;
padding: 40px;
}
.center h2 {
font-size: 40px;
text-align: center;
color: #757575;
padding-bottom: 40px;
}
.f1 {
width: 100%;
}
.itpw {
width: 92%;
padding: 13px 10px;
margin: 5px 0px;
background-color: #dbdbdb;
border: 3px solid #dbdbdb;
color: #757575;
transition: all 0.7s;
}
.its {
width: 99.7%;
font-size: : 19px;
color: : #f5f5f5;
padding: 12px;
margin: 5px 0;
background-color: #004d40;
border: none;
transition: all 0.4s;
}
.itpw:focus {
border-bottom: 3px solid #004d40;
color: #004d40 ;
}
.its:hover , its:focus {
opacity: 0.7;
cursor: pointer;
}
.center p {
margin: 20px 0;
text-align: center;
font-size: 14px;
}
.center p a {
color: #757575;
}
@media screen and (min-width: 1500px) {
.center{
width: 350px;
}
}
@media screen and (max-width: 900px){
#login {
background-size: 100% 100%;
}
.its {
width: 100%
}
.itpw {
font-size: 14px;
width: 90%;
padding: 13px 3%;
}
.center {
width: 230px;
}
.center p{
font-size: 12px;
}
}
@media screen and (max-width: 350px){
.center {
padding: 20px;
width: 75%;
}
}
-Script php
<?php
session_start();
$_SESSION['username'] ='';
unset($_SESSION['username']);
session_unset();
session_destroy();
header("location:index.php");
?>
session_start();
$_SESSION['username'] ='';
unset($_SESSION['username']);
session_unset();
session_destroy();
header("location:index.php");
?>
-Script php
<?php
session_start();
if (isset($_SESSION['username']) || !empty ($_SESSION['username'])){
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman utama</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>
<body>
<div id="login">
<div class="center">
<h2>I GOT THISSSSSSS YASSSS</h2>
<p><a href="logout.php">klik disini untuk Logout</a></p>
</div>
</div>
</body>
</html>
<?php
} else {
header ("location:index.php");
}
?>
session_start();
if (isset($_SESSION['username']) || !empty ($_SESSION['username'])){
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman utama</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>
<body>
<div id="login">
<div class="center">
<h2>I GOT THISSSSSSS YASSSS</h2>
<p><a href="logout.php">klik disini untuk Logout</a></p>
</div>
</div>
</body>
</html>
<?php
} else {
header ("location:index.php");
}
?>
Hasil
Kesimpulan
Web responsive mempermudah dan mempercantik tampilan di perangkat mana pun
Komentar
Posting Komentar