Berita Anda: PHP | Berita dalam dan luar negeri Dengan Multi Bahasa

Home » Penelusuran PHP

Cara Membuat QRCode Mengunakan PHPQRCode

QRCode merupakan sebuah code yang dibuat menjadi sebuah gambar, sehingga untuk membaca kode yang ada pada gambar tersebut dibutuhkan scan khusus QRCode....

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut.

File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/js.js"></script>
</head>
<body>
<div class="menu_atas">
<div class="kiri">
<div class="logo">
<img src="asset/icon/logo.png">
</div>
<div class="cari">
<div class="input">
<input type="text" name="cari" placeholder="Cari">
<div class="cr">
<img src="asset/icon/cari.png">
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="menu">
<div class="m">
<div class="ic_prof">

</div>
<div class="nama">
<a href="#">Coding</a>
</div>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Beranda</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Buat</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m2">
<div class="ic">

</div>
</div>
<div class="m2">
<div class="ic2">

</div>
</div>
<div class="m2">
<div class="ic3">

</div>
</div>
<div class="m2">
<div class="ic4">

</div>
</div>
<div class="m2">
<div class="ic5" id="drop">

</div>
<div class="ii" style="display: none;">

</div>
<div class="menu_drop" style="display: none;">
<div class="menud">
<a>Grup</a>
</div>
<div class="menud">
<a>Halaman</a>
</div>
<div class="menud">
<a>Aktivitas</a>
</div>
<div class="menud">
<a>Pengaturan</a>
</div>
<div class="menud">
<a>Keluar</a>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="content">

</div>
<script type="text/javascript">
$('#drop').click(function () {
var clas = $(this).attr('class');
if (clas=="ic5_putih") {
$(this).attr('class', 'ic5');
$('.menu_drop').attr('style','display: none;');
$('.ii').attr('style','display: none;');
}
if (clas=="ic5") {
$(this).attr('class', 'ic5_putih');
$('.menu_drop').attr('style','display: block;');
$('.ii').attr('style','display: block;');
}
})
</script>
</body>
</html>

Css.css

body{
margin: unset;
background: #dedede;
}
.menu_atas{
width: 100%;
height: 43px;
background: #ea4335;
border-bottom: 1px solid #7d2929;
}.kiri{
margin-left: 5%;
width: 50%;
height: 100%;
float: left;
}
.kanan{
width: 35%;
height: 100%;
float: left;
}.logo{
padding: 10px;
width: 50px;
float: left;
padding-right: 0px;
}.logo img{
width: 50%;
}.cari{
padding: 10px;
padding-left: 0px;
float: left;
width: 70%;
}.cari input{
width: 90%;
padding: 3px;
float: left;
font-size: 100%;
border:unset;

}.input{
background: white;
border-radius: 2px;
overflow: hidden;
display: flex;

}.cr{
float: left;
padding-top: 5px;
width: 9%;
text-align: center;
cursor: pointer;
}.cr img{
width: 15px;
}.cr:hover{
background: #ebedf0;
}.cr:active{
background: unset;
}.menu{
padding: 7px;
display: flex;
font-family: calibri;

}.menu a{
color: white;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}.m{
padding: 5px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}.m2{
padding: 3px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}
.m:hover{
background: #7d2929;
border-radius: 4px;
}.mn{
padding: 5px;
padding-right: unset;
padding-left: unset;

}.g{
border-right:1px solid #ce3232;
height: 100%;
}.ic_prof{
width: 20px;
height: 20px;
background-image: url('../icon/a.jpg');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
border-radius: 100%;
float: left;

}.nama{
margin-left: 7px;
float: left;
}.ic{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -25px -319px;
}.ic2{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -75px -319px;
}
.ic3{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -50px -294px;
}
.ic4 {
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: 0 -344px;
}.ic5{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -101px -294px;
}.ic5_putih{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -76px -294px;
}
.menu_drop{
width: 150px;
background: white;
position: absolute;
box-shadow: 0px 0px 8px -2px;
border-radius: 2px;
top: 48px;
right: 192px;
border: 1px solid #b6b2b2;
overflow: hidden;
}.ii{
width: 16px;
height: 8px;
background-image: url('../icon/ic2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -401px -245px;
position: absolute;
top: 36px;
right: 215px;
}.menud{
padding: 5px;
padding-left: 30px;
}.menud a{
color: black;
font-family: roboto;
font-weight: 300;
font-size: 12px;
}.menud:hover{
background: red;
}.menud:hover a{
color: white;
}

Untuk folder dan atribut lengkap silahkan download file projectnya disini.

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan...

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini.

Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah.

Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut :

Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php". Isi dari kedua file tersebut seperti berikut :

Index.php

<!DOCTYPE html>
<html>
<head>
<title>WHM</title>
<link rel="stylesheet" type="text/css" href="asset/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/jq.inview.js"></script>
</head>
<body>
<div class="atas">
<div class="menu_atas">
<div class="logo">
<h3>Aplikasi Percobaan</h3>
</div>
<div class="search">
<input type="text" name="cari" id="input" placeholder="Masukkan Kata Kunci">
</div>
<div class="menu">
<h3>Kategori</h3>
</div>
</div>
</div>
<div class="tengah">

</div>
<div class="bawah" id="bawah">
<div class="loader">
<img src="asset/gambar/loading.gif" class="load" id="load" style="visibility: hidden;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#bawah').on('inview', function(event, isInView) {
$('#load').attr('style', 'visibility:visible');
if (isInView) {

$.ajax({
type: 'POST',
url: 'data.php',
data: { page: 3 },
success: function(data){
if(data != ''){
$('.tengah').append(data);
// $('#load').attr('style', 'visibility:hidden');
} else {
$("#loader").hide();
}
}
});
}
});
});
</script>
</body>
</html>

Hal yang perlu anda garis bawahi atau pahamai terdapat pada code javascript. Pada kode tersebut di setel bahwa ketika "$("#bawah")" tampil atau inview maka data.php akan di muat kedalam div yang memiliki nama class "tengah" menggunakan bantuan ajax.

Data.php

<?php
for ($i=0; $i < 5 ; $i++) {
?>
<div class="card">
<div class="gambar">
<img src="asset/gambar/1.png">
</div>
<div class="atribut">
<div class="nama">
<a>SAMSUNG Galaxy Tab S4 2018</a>
</div>
<div class="harga">
<h2>Rp 30.000</h2>
</div>
<div class="deskripsi">

</div>
</div>

</div>

<?php } ?>

Kode di atas kita menampilkan card view yang berjumlah 5, dengan menggunakan proses perulangan. Teman-teman bisa memodifikasi file ini untuk menampilkan data dari database.

Untuk file projectnya bisa teman-teman download disini

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui...

Cara Merubah Angka Kedalam Bentuk Mata Uang di PHP

Language : Hai sobat sekalian kali ini kita akan belajar bagaimana caranya membuat sebuah angka atau bilangan menjadi bentuk mata uang. Kita misalkan...

Pages 2 of 2 Prev 12

buat_code.php

Cara Membuat QRCode Mengunakan PHPQRCode

Index.php

Css.css

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Index.php

Data.php

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Cara Merubah Angka Kedalam Bentuk Mata Uang di PHP