Mohon untuk bersikap bijak dalam setiap menyikapi infomasi dan berita yang beredar di internet karena tidak semua berita itu benar, terkadang di salah gunakan oknum tertentu untuk membuat kekacauan dan fitnah
Home » Penelusuran html

Mengenal dan Menginstall XAMPP



XAMPP merupakan aplikasi atau perangkat lunak yang berfungsi sebagai server yang berdiri sendiri (localhost). Aplikasi ini bersifat open source yang dapat di install di berbagai platform seperti Windows, Linux, serta Mac OS.

Nama XAMPP adalah singkatan dari X (sistem operasi), Apache, MySQL, PHP dan Pearl. Seperti namanya XAMPP memang terdiri dari beberapa aplikasi yang disatukan. Aplikasi ini akan sangat membantu pengembang web dalam membangung sebuah aplikasi Web.

Kegunaan XAMPP

Ada beberapa kegunaan XAMPP yang perlu diketahui oleh pemula. Berikut kegunaan XAMPP tersebut.

  • Sebagai server
    • Seperti yang sudah dikatakan diatas fungsi utama XAMPP adalah sebagai server, sebuah web dimana diserver tersebut di atur file-file yang akan di tampilkan pada halaman web.
  • Penghubung ke Database
    • Dalam membangun sebuah web database sangat diperlukan untuk menyimpan sebuah data. XAMPP berfungsi sebagai penghubung web dengan database yaitu database MYSQL.
  • Membantu perancangan aplikasi web secara offline
    • XAMPP membantu programer dalam membangun aplikasi web secara offline sebelum akhirnya di onlinekan di Internet.

Cara Instalasi XAMPP

Untuk menginstall XAMPP tidaklah sulit anda hanya perlu mengunduh file masternya disini.
  • Eksekusi hasil file yang telah di download.
  • Pada jendela baru klik Next
     
  • Centang semua aplikasi yang ada pada jendela selanjutnya lalu klik Next.
     
  • Jendela selanjutnya adalah untuk mengatur letak file instalasi XAMPP diletakkan, nantinya folder htdocs tempat anda meletakkan project web juga diletakkan disini. Jadi pastikan folder ini sudah sesuai dengan yang anda inginkan. Secara default folder instalasinya berada di C:\xampp
     
  • Silahkan klik Next untuk jendela-jendela yang muncul selanjutnya. Hingga proses instalasi dimulai seperti pada gambar dibawah.
     
  • Terakhir klik finish
Memulai Membuat Project dengan XAMPP
Project pertama ini kita mulai dengan membuat sebuah web sederhana yaitu hello world. Tutorial ini saya tujukan untuk pemula dalam dunia pemrograman web khususnya pemula dalam menggunakan XAMPP. Ikuti langkah-langkah di bawah ini.

  • Buka aplikasi XAMPP.
  • Klik tombol start pada Apache dan Mysql hingga warnanya menjadi hijau serta tombol statrt menjadi tombol stop seperti gambar dibawah.
     
  • Sekarang buka folder htdocs di lokasi penginstalan tadi. Saya sendiri lokasinya ada di C:\xampp\htdocs. Silahkan buat folder baru di dalam folder tersebut dengan nama "belajar" seperti gambar dibawah. Folder dengan lingkaran merah adalah folder yang baru saya buat sedangkan yang lainnya adalah project web yang pernah dibuat sebelumnya.
     
  • Buat sebuah file dengan nama index.html. Anda bisa menggunakan editor seperti sublime text, notepad++, atau sejenisnya.
    • Kemudian edit file index.html tersebut dengan kode seperti dibawah.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Belajar XAMPP</title>
    </head>
    <body>
        <h1>Hello World !!</h1>
    </body>
    </html>

  • Buka browser internet anda seperti Mozilla atau Chrome. Ketikkan di alamt urlnya dengan localhost/belajar
     
  • Selamat belajar membuat aplikasi-aplikasi selanjutnya.

Cara Membuat Tampilan Login seperti Facebook


Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika membuka facebook (tampilan login dan daftar). Dalam pembuatan kali ini bahasa pemrograman web yang digunakan adalah HTML, dan CSS. Tampilan akhirnya akan tampak seperti berikut :



Berikut adalah kode dalam file utama "index.html" dan "css.css".

index.html



<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tampilan Login seperti Facebook</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="atas">
<div class="bungkus">
<div class="kiri">
<h3>codingrakitan</h3>
</div>
<div class="kanan">
<div class="user">
<div class="judul">
Email atau Telepon
</div>
<div class="input">
<input type="text" name="username">
</div>
</div>
<div class="user" style="margin-right: 2px;">
<div class="judul">
Kata Sandi
</div>
<div class="input">
<input type="password" name="password">
</div>
<div class="lupa">
<a href="#">Lupa akun?</a>
</div>
</div>
<div class="user" >
<div class="judul" style="color: transparent;">
|
</div>
<div class="input">
<button>Masuk</button>
</div>
</div>
</div>
</div>

</div>
<div class="content">
<div class="bc">
<div class="kr">
<div class="jd">
Codingrakitan.blogspot.com membantu anda dalam belajar pemrograman android, hingga web.
</div>
<div class="gm">
<img src="asset/icon/bc.png">
</div>
</div>
<div class="kn">
<div class="at">
<h2>Daftar</h2>
<a>Gratis, sampai kapan pun.</a>
</div>
<div class="it" style="display: flex;margin-top: 20px;">
<div class="it1" style="margin-right: 7px;">
<input type="text" name="nd" placeholder="Nama depan">
</div>
<div class="it1">
<input type="text" name="nb" placeholder="Nama belakang">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="nr" placeholder="Nomor seluler atau email">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="kt" placeholder="Kata sandi baru">
</div>
</div>
<div class="it" style="margin-top: 30px;">
<div class="jd2">
<h5>Tanggal Lahir</h5>
</div>
</div>
<div class="it" style="display: flex;">
<div class="sl">
<select>
<option>Tanggal</option>
</select>
</div>
<div class="sl">
<select>
<option>Bulan</option>
</select>
</div>
<div class="sl">
<select>
<option>Tahun</option>
</select>
</div>
</div>
<div class="it">
<div class="jd2">
<h5>Jenis Kelamin</h5>
</div>
</div>
<div class="it" style="display: flex;margin-bottom: 20px;">
<div class="rd">
<input type="radio" name="jk">
Perempuan
</div>
<div class="rd">
<input type="radio" name="jk">
Laki-laki
</div>
<div class="rd">
<input type="radio" name="jk">
Khusus
</div>
</div>
<div class="it">
<p>Dengan mengklik Daftar, Anda menyetujui Ketentuan, Kebijakan Data dan Kebijakan Cookie kami. Anda akan menerima Notifikasi SMS dari Facebook dan dapat menolaknya kapan saja.</p>
</div>
<div class="it">
<button>Daftar</button>
</div>
</div>
</div>
</div>
</body>
</html>


css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.atas{
width: 100%;
height: 80px;
background:#983b45;

}.bungkus{
width: 73%;
height: 100%;
margin: auto;
display: flex;
font-family: Helvetica, Arial, sans-serif;
}.kiri{
width: 59%;
height: 100%;


}.kiri h3{

margin: 0px;
margin-top: 20px;
color: white;
font-size: 30px;
}.kanan{
height: 100%;
}.user{
float: left;
padding: 10px;
font-size: 12px;
padding-top: 15px;
}.judul{
margin-bottom: 5px;
color: white;
}.input input{
padding: 2px;
border:1px solid #1d2a5b;
}.lupa a{
text-decoration: none;
color: #8fb4cc;
}.lupa{
margin-top: 5px;
}.input button{
background: #b24242;
border: 1px solid #7d2929;
padding: 3px;
color: white;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
}.content{
background: url(../icon/aa.png) 0 bottom repeat-x;
background: linear-gradient(white, #E8D3D3);
width: 100%;
padding-bottom: 200px;
}.bc{
margin: 0 auto;
width: 980px;
display: flex;
}.kr{
width: 565px;
}.kn{
width: 400px;
}.jd{
color: #0e385f;
font-size: 20px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it{
margin-top: 10px;
}.it1{
width: 100%;
background: white;
border-radius: 7px;
border: 1px solid #bdc7d8;
overflow: hidden;
}.it1 input{
font-size: 18px;
padding: 7px;
width: -moz-available;
border:unset;
}.at{
font-family: Helvetica, Arial, sans-serif;
}.at h2{
font-weight: 600;
color: #333;
margin-bottom: 5px;
font-size: 36px;
}.at a{
color: #1d2129;
font-size: 19px;
}.sl select{
border: 1px solid #ccd0d5;
font-size: 13px;
background-color: #fff;
color: #1c1e21;
height: 30px;
padding: 5px;
}.jd2 h5{
margin: unset;
color: #90949c;
}.jd2{
color: #0e385f;
font-size: 20px;
font-weight: bold;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it button{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
font-weight: bold !important;
font-size: 19px;
letter-spacing: normal;
text-rendering: optimizelegibility;
/*box-shadow: inset 0 1px 1px #a4e388;*/
border:1px solid;
border-color: #3b6e22 #3b6e22 #2c5115;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
letter-spacing: 1px;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
min-width: 194px;
padding: 7px 20px;
text-align: center;
}.it p{
color: #777;
font-size: 11px;
width: 316px;
}.rd{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
color: #1d2129;
font-size: 18px;
font-weight: normal;
line-height: 18px;
padding: 0 10px 0 3px;
}


Untuk melihat atau mendownload project lengkapnya silahkan klik disini

Membuat Tampilan Seperti WhatsApp Web dengan HTML dan CSS


WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB. Alamat resminya adalah https://web.whatsapp.com/.

Pada postingan kali ini saya akan membagikan tutorial tentang cara membuat tampilan web seperti pada halaman WhatsApp Web. Disini saya hanya akan membuat tampilan saja, untuk web dengan aksinya akan saya ajarkan pada postingan selanjutnya. Hasilnya nanti akan tampak seperti gambar dibawah :


Langsung saja dua code yang harus anda perhatikan adalah "index.html" dan "css.css" yang ada pada folder "asset/css/css.css".

index.html



<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat QR Code</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="co">
<div class="content">
<div class="bc">
<div class="kiri">
<div class="title">Untuk menggunakan CodingRakitan di komputer Anda:</div>
<ol class="_1TxZR"><li class="_1Fl07">Buka CodingRakitan di telepon Anda</li><li class="_1Fl07"><span dir="ltr" class="selectable-text invisible-space copyable-text">Ketuk <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Menu <span class="_3PxOr"><svg height="24px" viewBox="0 0 24 24" width="24px"><rect fill="#f2f2f2" height="24" rx="3" width="24"></rect><path d="m12 15.5c.825 0 1.5.675 1.5 1.5s-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5.675-1.5 1.5-1.5zm0-2c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5zm0-5c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5z" fill="#818b90"></path></svg></span></span></strong> atau <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Pengaturan <span class="_3PxOr"><svg width="24" height="24" viewBox="0 0 24 24"><rect fill="#F2F2F2" width="24" height="24" rx="3"></rect><path d="M9.34 8.694a4.164 4.164 0 0 0-1.606 3.289c0 1.338.63 2.528 1.61 3.292l-1.46 2.527a7.065 7.065 0 0 1-3.052-5.82c0-2.41 1.206-4.54 3.048-5.816l1.46 2.528zm6.713 2.859c-.217-2.079-1.992-3.739-4.148-3.739-.578 0-1.128.116-1.628.329L8.819 5.617a7.042 7.042 0 0 1 3.086-.704c3.76 0 6.834 2.958 7.059 6.64h-2.91zm-1.065.43a3.083 3.083 0 1 1-6.166 0 3.083 3.083 0 0 1 6.166 0zm-6.164 6.364l1.458-2.523a4.153 4.153 0 0 0 1.623.322 4.154 4.154 0 0 0 4.12-3.524h2.922a7.062 7.062 0 0 1-7.042 6.426c-1.105 0-2.15-.25-3.081-.7zm11.197-7.21a7.88 7.88 0 0 0-.404-1.824l.286-.12a.527.527 0 0 0-.403-.973l-.29.12a8.176 8.176 0 0 0-1.197-1.77l.231-.23a.526.526 0 1 0-.744-.744l-.234.234a8.17 8.17 0 0 0-1.775-1.18l.13-.31a.526.526 0 1 0-.972-.403l-.12.313a8.463 8.463 0 0 0-1.995-.405v-.35A.533.533 0 0 0 12 2.97a.533.533 0 0 0-.535.526v.338a8.02 8.02 0 0 0-2.173.416l-.13-.313a.526.526 0 0 0-.972.402l.129.311a8.171 8.171 0 0 0-1.775 1.18l-.235-.235a.526.526 0 0 0-.743.744l.23.231A8.175 8.175 0 0 0 4.6 8.34l-.29-.12a.526.526 0 0 0-.403.971l.285.122a7.882 7.882 0 0 0-.404 1.824h-.322a.533.533 0 0 0-.526.534c0 .29.235.535.526.535h.28c.02.831.166 1.624.418 2.378l-.257.1a.523.523 0 1 0 .402.968l.252-.105a8.17 8.17 0 0 0 1.191 1.797l-.187.187a.526.526 0 1 0 .744.743l.184-.183a8.173 8.173 0 0 0 1.792 1.208l-.096.231a.526.526 0 1 0 .972.403l.096-.23c.698.24 1.436.387 2.208.428v.243c0 .29.244.526.535.526.29 0 .534-.235.534-.526v-.253a8.012 8.012 0 0 0 2.03-.417l.09.229a.523.523 0 1 0 .967-.403l-.096-.231a8.172 8.172 0 0 0 1.792-1.208l.184.183a.526.526 0 1 0 .743-.744l-.187-.186a8.174 8.174 0 0 0 1.191-1.798l.252.104a.526.526 0 1 0 .403-.971l-.257-.095a8.074 8.074 0 0 0 .417-2.378h.281c.29 0 .526-.244.526-.535a.533.533 0 0 0-.526-.534h-.323z" fill="#818B90"></path></svg></span></span></strong> dan pilih <strong>CodingRakitan Web</strong></span></li><li class="_1Fl07">Arahkan telepon Anda ke layar ini untuk memindai kode tersebut</li></ol>
</div>
<div class="kanan">
<img src="asset/gambar_kode/qrkode.png">
</div>
</div>

</div>
</div>
<div class="back">
<div class="logo">
<div class="l">
<img src="asset/icon/logo.png">
</div>
<div class="j">
<a href="">CODINGRAKITAN.BLOGSPOT.COM</a>
</div>


</div>
</div>


</body>
</html>

Kode di atas berfungsi sebagai kerangka.

css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.content{
margin: auto;
width: 65%;
text-align: center;
background: white;
margin-top: 100px;
padding: 64px 60px 110px;
box-shadow: 0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
border-radius: 4px;
}.content img{
width: 100%;
/*box-shadow: 2px 1px 4px 1px;*/

}.back{
background: #bd1e1e;
width: 100%;
height: 222px;
}.co{
width: 100%;
position: absolute;
}.bc{
display: flex;
}
.kiri{
max-width: 556px;
/*float: left;*/
}.kanan{
max-width: 264px;
margin-left: 60px;
/*float: left;*/
}.title{
color: #55636b;
font-size: 28px;
font-weight: 300;
line-height: normal;
vertical-align: baseline;
text-align: left;
margin-bottom: 52px;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}._1TxZR{
text-align: left;
padding: 0 0 0 24px;
margin: 0;

list-style: none;
list-style-type: decimal;
font: inherit;
    font-size: inherit;
font-size: 100%;
vertical-align: baseline;
outline: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: #4b4b4b;
text-rendering: optimizeLegibility;
font-size: 18px;
line-height: 28px;

}li{
margin-top: 18px;
}.logo img{
width: 50px;
height: 50px;

}.logo{
width: 78%;
margin: auto;
padding-top: 25px;
}.logo a{
text-decoration: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: white;
font-size: 12px;
}.l{
float: left;
}.j{
float: left;
padding: 13px;
}
File ini berfungsi untuk mengatur tampilan kerangka yang telah dibuat, seperti warna, ukuran, font, dll.

Silahkan download project file disini.

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 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.

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 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


Back To Top