Membuat Domain Name Server (DNS) di Debian 6 Server

Assalamualaikum Wr.Wb
Domain Name Server ! Apa itu Domain Name Server ( DNS )? Bicara Domain Name Server (DNS), pasti kamu sudah kenal dengan kata “Domain”?. Domain name server adalah sebuah aplikasi service di internet yang berfungsi untuk menerjemahkan Domain Name IP Address dan salah satu jenis system yang melayani request pemetaan IP address ke FQPN (Fany Qualified Domain Name) dan dari FQDN ke IP address.

Oke, langsung saja kita mulai. Pastikan kita sudah menginstall debian 6 CLI (Bukan GUI). Langkah yang pertama adalah membuat ip.

#nano /etc/network/interfaces

Lalu edit hingga kira-kira menjadi seperti pada gambar. Oh iya, kalian bisa memasukan ip sesuai keinginan kalian sendiri !

 Jika sudah selesai, lalu simpan dengan perintah CTRL+O dan untuk keluar CTRL+X atau langsung keluar dengan perintah CTRL+X lalu tekan Y kemudian ENTER. Lalu restart jaringannya dengan perintah ;

#/etc/init.d/networking restart

Tunggu sampai proses selesai, biasanya sih tidak lama kira kira hanya sekedip mata dua kedip mata tiga kedip mata empat kedip mata hehehehe, becanda :D.

Untuk membuat Domain Name Server, kita butuh paket bind9. Paket ini ada di debian, dan cara memasangnya mudah kok ;
1. Pastikan DVD/Bootable Debian 6 sudah anda masukan.
2. Lalu install bind9 dengan perintah ;

#apt-get install bind9

3. Lalu kita akan menemukan pilihan yes/no, kita pilih yes untuk melanjutkan.
4. Dan tunggu sampai proses selesai.
Jika sudah selesai, selanjutnya menyalin file db.local dan file db.127, dengan perintah ;

#cp /etc/bind/db.local /etc/bind/db.rajoe

#cp /etc/bind/db.127 /etc/bind/db.192

“cp” adalah perintah copy, pada “cp /etc/bind/db.local /etc/bind/db.rajoe” disitu ada dua directory. Yang pertama adalah directory yang akan di copy, dan yang kedua adalah directory yang duplikatnya,
disini kita bebas memberi nama ”db.apajamisalnya”.

Selanjutnya melakukan konfigurasi default-zones dengan melakukan perintah sebagai berikut ;

#nano /etc/bind/named.conf.default-zones

Pilih text yang akan di copy seperti gambar dibawah ini ; 
 

Untuk mempersingkat waktu, cara cepatnya adalah copy paste. Saya akan tunjukan langkah – langkah nya ;
1. Untuk memilih text atau biasa disebut drag, CTRL+6. Pilih text seperti gambar diatas !
2. Jika sudah di pilih, kemudian copy dengan perintah ALT+6.
3. Untuk paste perintah nya adalah CTRL+U.

Lalu kita paste kan di bagian paling bawah, dan ubah ;
1. “localhost” menjadi “rajoe.com”. NB : Kalian bisa mengubah sesuai keinginan
2. “127.in-addr.arpa” menjadi “10.168.192”. (3 suku pada ip berdasarkan urutan paling belakang)
3. Ubah “db.local” menjadi “db.rajoe “(ini adalah file yang sudah kita copy paste sebelumnya jadi, sesuaikan nama file tersebut).
4. Ubah “db.127” menjadi “db.192”.

Nah kira kira hasilnya seperti pada gambar di bawah ini ;

Simpan dengan perintah yang sudah saya jelaskan pada konfigurasi ip.
Selanjutnya adalah mengedit file “/etc/bind/db.rajoe”;

#nano /etc/bind/db.rajoe

Ubah hingga menjadi seperti pada gambar dibawah ini, dan jangan lupa di save ;

Dan kita juga mengubah “/etc/bind/db.192”;

#nano /etc/bind/db.192

Ubahlah hingga menjadi seperti gambar dibawah ini , dan jangan lupa di save;

Kemudian konfigurasi terakhir adalah “resolv.conf” untuk ;
1. Memasukan Search Domain Server
2. Memasukan IP Nameserver
3. Memasukan Domain

Seperti biasa kita memasukan perintah;

#nano /etc/resolv.conf

Install apache2

#apt-get install apache2

Kira kira seperti gambar dibawah ini, dan jangan lupa di save!

Restart semua yang sudah kita konfigurasi ;
Pada jaringan kita menggunakan perintah #/etc/init.d/networking restart
Pada DNS kita menggunakan perintah #/etc/init.d/bind9 restart
Akhirnya selesai juga konfigurasinya, eitss ada yang lupa nih . kita belum install client dan konfigurasi jaringannya untuk itu kita harus menginstallnya. (Windows 7)
Karena kita belum memakai dhcp-server, maka kita harus konfigurasi secara manual pada windows-client kita.

Dan seperti gambar dibawah ini ;

Lalu cek di browser, dengan mengetikan domain yang sudah kita buat. Misalkan rajoe.com, apabila tampilannya seperti dibawah ini maka konfigurasi DNS telah berhasil;

Untuk memastikannya, kita bisa mengetikkan perintah seperti di bawah ini ;

#dig rajoe.com

Dan tampilannya seperti dibawah ini ;

Selesai

Membuat halaman login yang keren dan Responsive HTML5 CSS3

Assalamualakum Wr.Wb
Kali ini saya akan mempostingkan tutorial saya bagaimana cara membuat halaman login yang keren dan responsive.Berikut ini view nya ;

Nah langsung saja kita mulai, buat folder di xampp/htdocs ( Jika kalian menggunakan xampp), didalam folder yang kita buat, buat file baru " index.php".

<style>
body{
padding: 0;
margin:0;
overflow: hidden;
color: #666;
font-family: Arial;

}
#cover{
width: 100%;
height: 80%;
padding-top: 10%;
background-image: url(image/bg.jpg);
background-size: 100% 100%;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;

}
#login{
padding: 5px;
border-radius:8px;
width: 350px;
background: rgba(255,255,255,.97);
}
input[type=text],input[type=password]{
padding:12px 15px;
margin-bottom: 12px;
border:1px solid#ddd;
color: #aaa;
width: 90%;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
input[type=text]:hover,input[type=password]:hover{
border:1px solid#aaa;
}
input[type=text]:focus,input[type=password]:focus{
border:1px solid#444;

}
input[type=submit]{
padding:12px 15px;
margin-bottom: 12px;
border:0px solid#ddd;
width: 90%;
color:#fff;
background-color: #888;
font-weight: bolder;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
cursor: pointer;

}
input[type=submit]:hover{
background-color: #555;
}
@media screen and (max-width: 650px){
#cover{
width: 100%;
height: 600px;
padding-top: 30%;
background-size: unset;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;


}
#login{
width: 90%;
}
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Login</title>
</head>
<body>

<div id="cover" align="center">
<div id="login" align="left">
<h2 align="center">Login now !</h2>
<form>
<center>
<input type="text" name="username" required placeholder="Username">
<input type="password" name="password" required placeholder="Password"><br />
</center>
&nbsp; &nbsp; &nbsp;<input type="checkbox" name="remember" value="remember" checked="checked"> <a style="font-size: 13px;">Remember me !</a><br /><br />
<center>
<input type="submit" value="Login">
</center>
</form>
</div>
</div>


</body>

</html>

Jika masih belum jelas lagi, bisa di download kok file nya;

Download

Cara Merubah Tampilan Login Hotspot Mikrotik Sendiri Responsive

Memiliki desain halaman login hotspot   tentu menjadi keingininan sendiri, ada manfaat yang bisa kita lihat dari mendesain halaman login mikrotik sendiri seperti ; 
- Memicu ketertarikan pengunjung untuk menggunakan hotspot
- Sebagai media untuk periklanan, hal ini juga menjadi peluang tambahan

Apabila kita melihat kedalam Files di storage router akan terlihat kumpulan file yang berekstensi html. Salah satunya ada file dengan nama login. Dari file inilah tampilan-tampilan login hotspot itu berasal.

Kita juga bisa mengubah tampilan standart dari login hotspot menjadi lebih artistik sesuai dengan keinginan kita. Namun sebelumnya kita harus mengetahui fungsi dari masing-masing file login tersebut. Diantara file tersebut adalah login.html, alogin.html, rlogin.html, flogin.html. Untuk penjelasannya adalah sebagai berikut :

• login html – Merupakan sebuah halaman login yang ditampilkan untuk autentikasi user dengan memasukkan username dan password.
• alogin.html – Sebuah halaman yang ditampilkan setelah user berhasil di autentikasi. Halaman ini menampilkan sebuah pop-up tentang status dari halaman apakah 'Log In' atau 'Log Off' dan juga akan diredirect (otomatis/manual) ke halaman web yang diakses oleh user.
• rlogin.html – Sebuah halaman yang me-redirect user dari mengakases halaman URL ke halaman login, jika user tersebut memerlukan autorisai untuk melakukan akses.
• flogin.html – Sebuah halaman login yang ditampilkan apabila terdapat kesalahan (error) terjadi. Misal, ketika user salah memasukkan 'Username' maupun 'Password'.

Kemudian untuk cara kerja dari request halaman “/login” adalah :

- Apabila user belum terautentikasi dan melakukan akses sebuah web maka akan di-redirect ke halaman login.html.
- Apabila prosedur login gagal (baik salah memasukkan username atau password), maka akan ditampilkan halaman flogin.html; Jika halaman flogin.html tidak ditemukan maka akan ditampilkan halaman login.html.
- Apabila user telah berhasil terautentukasi (login), alogin.html akan ditampilkan; apabila alogin.html tidak ditemukan maka akan langusung di-redirect ke halaman web yang di akses oleh user tersebut atau ke halaman status.

Nah, untuk mengubahnya, kita akan memodifikasi script dari file login.html. File tersebut dapat kita download terlebih dahulu dari router, baik menggunakan FTP (Linux dan Mac OS) atau cukup 'Drag & Drop' untuk Windows OS.

<style type="text/css">
html {
 font-family: calibri;

}
#nav a{
color: #ddd;
font-family: arial;
padding: 0px 10px;
}
#nav a:hover{
color: #fff;
}
nav{
height: 40px;
padding: 0;
}


.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.right-center{
text-align:right;
}
.left-center{
text-align:left;
}
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.42857143;
box-sizing: border-box;
}
#nav{
background: #424242;
color: #ddd;
width: 100%;
position: fixed;
padding: 10px 20px;
}
#credit{
font-family: monospace;
border-top:1px solid#aaa;
width: auto;
font-size: 12px;
padding: 12px;
}
header{
background: #f2f2f2;
color:#424242;
border-bottom: 4px solid#0079df;
padding: 12px;
}
.content{
padding: 2px;
background: #fff;
min-height: 400px;
}
footer{
border-top: 5px solid#0079df;
background: #626262;
color: #f2f2f2;
padding: 11px 12px;
text-align: center;
}
a{
color: #aaa;
font-weight: bolder;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
}
a:hover{
color: #656565;
text-decoration: none;
}
footer a{
color: #ddd;
}
footer a:hover{
color: #fff;
}
h1,h2,h3,h4{
color: #626262;
font-weight: 700;
}
input[type=text],input[type=password]{
padding: 12px 8px;
font-size: 14px;
width: 60%;
color: #aaa;
font-family: arial;
border-radius: 5px;
border:1px solid#aaa;
margin-bottom: 4px;
}
input[type=submit]{
padding:12px;
border-radius: 5px;
width: 60%;
font-family: arial;
color: #fff;
font-weight: bolder;
box-shadow: 2px 2px 1px #ddd;
background: #04d80e;
border:0px solid#aaa;
}
input[type=submit]:hover{
background: #03b10c;
cursor: pointer;
}
input[type=submit]:focus{
background: #007d06;
}
/*================================= Untuk Tata Letak ====================================================================*/
.row{
overflow: hidden;
}
.col-md-1{
width: 29%;
padding: 5px;
float: left;
padding: 4px;
margin: 4px;

}
.col-md-4{
width: 68%;
padding: 5px;
margin: 4px;
float: left;
}


.description{
font-size: 14px;
color: #a4a4a4;
font-family: kalinga;
}
@media(max-width: 900px){
.left-center{
text-align:center;
}
#credit{
font-size: 7px;
}
.content{
padding: 0;
}
.description{
font-size: 8px;
}
#nav{
background: rgba(66,66,66,.95);
color: #aaa;
padding: 9px;
}
.right-center{
text-align:center;
}
.col-md-1{
width: 100%;
float: none;
padding: 0;
}
.col-md-4{ /**/
width: 100%;
float: none;
padding: 0;
margin: 2px;
}
input[type=submit]{
width: 85%;
}
input[type=text],input[type=password]{
width: 80%;
}

}

/* ======================================================------------============================================== */
</style>

<!DOCTYPE html>
<html>
<head>
<title>RAJOEhotspot</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
<nav>
<div class="left-center" id="nav">
<a href="">Home</a>
<a href="">Privacy</a>
<a href="">Policy</a>
<a href="">About US</a>
</div>
</nav>
<header>
<div class="row">
<div class="col-md-1 center"><img style="margin: 12px; cursor: pointer;" title="MYhotspot" onclick="location.href=''" src="image/logokalian.png" width="250" height="80" alt="Masukan Logo Kamu"></div>
<div class="col-md-4 right-center description">Contact us : 0852-xxxx-xxxx  &nbsp;|&nbsp; mail : rajoe001@gmail.com</div>
</div>
</header>
<content>
<div class="content">
<div class="row">
<div class="col-md-1 center">
<h2>Welcome to Myhotspot</h2>
<form>
<input type="text" name="username" placeholder="Username" required><br />
<input type="password" name="password" placeholder="Password" required><br />
<input type="submit" value="Login Now"><br /><br />
<a href="">Saya tidak memiliki akun !</a><br /><br />
</form>
</div>
<div class="col-md-4 right-center">
<img src="image/slide3.jpg" alt="Masukan Slideshow Kamu" width="100%" height="300">
</div>
</div>
</div>
</content>
<footer>
<a href="">Privacy</a> <a href="">Policy</a> <a href="">About US</a><br />
<div id="credit">Copyright &copy; 2017. Design by Edy Kurniawan All Reserve</div>
</footer>

</body>
</html>

Juga bisa di download kok file nya ;
Download

Phonepedia, Contoh Website Toko Handphone Online Berbasis Php Mysqli Full Responsive

Assalamualaikum Wr.Wb.

Hay sobat blogger, kali ini saya juga memposting tentang website Toko Handphone Online. Toko handphone yang saya buat ini basis nya Php mysqli, dengan design tampilan yang responsive dan cukup elegan, semoga aja kalian tertarik ya hehheheheh :D. Langsung saya jelasin ya skema website ini, website ini memiliki dua hak akses, yaitu pembeli/pelanggan dan Administrator, disini pelanggan bisa order barang atau membeli langsung barang tersebut setelah dreview. Jika pembeli membeli lebih dari dua barang maka akan mendapatkan diskon 5% dan jika pelanggan membeli satu barang maka tidak mendapatkan diskon. Disini juga disediakan yang namanya mesin pencari barang dan kamu bisa mencari nya dengan kata kunci yang bertargetkan nama barang dan merk barang.

 Untuk penjelasan secara rinci :

Halaman Utama

Ini adalah tampilan pada halaman utama dari phonepedia teman-teman, dengan memuat slide-show, barang, dan juga beberapa informasi terupdate seputar teknologi. Tampilannya yang dinamis dan juga responsive bukan berarti ini memakai bootstrap ya ! ini murni dari css, kalau kalian terinspirasi dari website ini silahkan saja dipelajari struktur CSS nya. Pada Navbar, terdapat logo Phonepedia, Search Engine, dan juga tombol login temen - temen, karena website ini membutuhkan akun untuk dapat lebih leluasa dalam mengakses website ini.

Form Pendaftaran Dan Login

Ini adalah tampilan dimana calon pelanggan dapat mendaftarkan dirinya di website ini ketika kamu sudah selesai memasukan data diri lalu klik selesai dan kamu akan di bawa langsung ke form login.
 

Halaman Utama Pelanggan

 

Halaman utama pelanggan berbeda dengan halaman utama umum/belum login. disini terlihat menu profil,notifikasi,shoping cart dan logout.

Yang ini adalah tampilan halaman utama pelanggan pada mobile,





















Penasaran kan? heheheheh :D untungnya saya sudah hostingkan itu website dan kalian bisa cek langsung di www.phonepedia.hol.es.

Contoh Website Sistem Informasi Perpustakaan Sekolah Berbasis Php Mysql

Assalamualaikum Wr.Wb.

Bertemu lagi dengan saya, rajoe. nah kali ini saya akan membagikan tautan sekaligus berbagi hasil, hasil apakah itu? nah ini adalah hasil dari kerja saya sendiri, walaupun sangat sederhana tetapi fungsi nya berjalan dengan baik, mulai dari admin manajemen hingga user page sudah tersedia disini. Website ini bernama "inboepoera", mungkin akan saya berikan screenshotnya kepada anda :

Halaman Utama

Halaman utama memuat seluruh konten utama website seperti ; slideshow,list buku, beberapa informasi terupdate.

Form Pendaftaran

 


 
Form pendaftaran adalah halaman dimana seseorang siswa/guru untuk membuat akun dan mendapatkan hak akses nya pada website ini. Jika seseorang tidak memiliki akun, maka secara otomatis tidak dapat meminjam buku pada website ini.

Halaman Admin

Pada halaman ini, hanya admin/guru yang dapat mengaksesnya dan pada halaman ini terdapat menu yang tidak dapat dimiliki oleh hak akses lainnya.

Halaman Pencarian

Nah kalau yang ini adalah halaman pencarian untuk buku. pengguna dapat mencari dengan kata kunci yang bertargetkan Judul buku, Penulis, Tahun, dan Jurusan.


Nah itu tadi adalah beberapa screenshot dari website sistem informasi perpustakaan sekolah. Kalau saya menilai ini website sangat sederhana, jika kalian ingin mempelajari website ini? khusus nya kamu yang baru belajar/newbie phpmysql.

Saya sudah sediakan file nya, dan bisa kamu comot langung, Silahkan di download ya :

Download

Akhirnya selesai juga, dan aku pengen akhiri artikel ini dengan mengucapkan Alhamdulillah, dan bagi kamu yang ingin usul, beri masukan atau bertanya, kalian bisa komen dibawah ini ya. Terimakasih dan Salam Blogger.

Assalamualikum WR.WB

Membuat Mesin Pencari Dengan PHP MYSQLI

Sebelumnya kalian tahu kan apa itu mesin pencari atau biasa kita sebut Search Engine ? Kalau belum tahu secara rinci maka saya akan jelaskan terlebih dahulu !

Mesin pencari web atau biasa disebut dengan Search Engine adalah program komputer yang dirancang untuk melakukan pencarian atas berkas-berkas yang tersimpan dalam layanan www, ftp, publikasi milis, ataupun news group dalam sebuah ataupun sejumlah komputer peladen dalam suatu jaringan. Search engine merupakan perangkat pencari informasi dari dokumen-dokumen yang tersedia. Hasil pencarian umumnya ditampilkan dalam bentuk daftar yang seringkali diurutkan menurut tingkat akurasi ataupun rasio pengunjung atas suatu berkas yang disebut sebagai hits. Informasi yang menjadi target pencarian bisa terdapat dalam berbagai macam jenis berkas seperti halaman situs web, gambar, ataupun jenis-jenis berkas lainnya. Beberapa mesin pencari juga diketahui melakukan pengumpulan informasi atas data yang tersimpan dalam suatu basisdata ataupun direktori web.

Nah sekarang kita akan membuat yang namanya mesin pencari dengan menggunakan PHP MYSQLI. Mesin pencari yang akan kita buat sangatlah sederhana !

Langsung saja kita mulai, yang pertama adalah membuat file baru di halaman htdocs yang sudah anda buat dengan nama form-pencarian.php atau directorinya : htdocs/namawebsite/form-pencarian.php atau bisa anda buat nama file tersebut sesuka anda :

<form action="result.php" method="post"> 

        <input  type="text"  name="cari"  placeholder="Search" required>
        <input  type="submit" size="22" value="Cari"> 

</form>

Setelah membuat form-pencarian.php, lalu kita buat file aksi dari form tersebut berupa result.php atau sesuai keinginan anda dan directorinya : htdocs/namawebsite/result.php

<?php
//buat dulu skrip koneksi kedatabase
$koneksi=new mysqli("localhost","root","","database_kalian");

//ingat, sebelumnya saya sudah memiliki data yang tersimpan di database

           if(isset($_POST['cari'])){ //Jika terpasang postingan dari "cari" maka
           $cari=$_POST['cari'];
           $cari=preg_replace("#[^a-z0-9]#i"," ", $cari);//fungsi ini untuk menghindari karakter selain dari huruf dan angka dengan mengubahnya menjadi spasi, misalkan karakter ' maka akan berubah menjadi space
           $data_pencarian=$koneksi->query("SELECT * FROM tabel_database_kalian WHERE nama_kolom LIKE '%$search%' ");
           foreach($data_pencarian as $result){
           echo $result['nama_kolom']."<br />";


          }
          }else{}
?>

Sekarang tinggal anda jalankan di browser anda ! jika ada peringatan error, ada beberapa kemungkinan kesalahan penulisan seperti :

1. Penulisan pada tanda kurung, tanda koma atas pada fungsi if, atau fungsi php lainnya;
2. Kesalahan menulis variabel yang anda buat atau $, memang sedikit sih kemungkinan kesalahan penulisan ini, tapi yang namanya manusia pasti ada salahnya kan ?
3. Lalu ada juga kesalahan penulisan pada nama database,nama tabel,nama kolom. Pada Kesalahan ini memanglah sering terjadi.

Demikian lah artikel dari saya semoga bermanfaat, jika anda ada kendala dalam menjalankan tutorial dari saya ini  langsung aja anda komen di kolom komentar ! Sampai jumpa di tutorial saya selanjutnya.