GALLERY PHOTO THUMB WITH BOOTSTRAP 3 (DOWNLOAD)

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Apaka kabar para pembaca.
Semoga kita semua selalu dalam lindungan Allah Tuhan Yang Maha Esa.
Amin Ya Robbal Alamin.

Pada kesempatan ini saya ingin berbagi sedikit mengenai BOOTSTRAP 3.
Ya, setelah saya pelajari ternyata bootstrap 3 lebih nyaman digunakan dari pada versi yang sebelumnya,
dan saya memcoba untuk membuat sebuah template yang nantinya akan saya gunakan untuk membuat
sebuah website Directory Alumni.

Website ini nantinya akan berisi data-data siswa/i tepatnya mantan siswa/i dari sebuah sekolah.
Dimana setiap mantan siswa/i tersebut bergabung di dalamnya untuk mengobrol, berbagi kenangan masa lalu,
dan hal-hal lain.

Eits, maaf.
Kembali ke judul besar kita, template ini tidak saya bandrol dengan harga.
Yaps, benar! Ini free... for you.

Langsung saja ini tampilannya :

  

Dan link downloadnya ada disini.
DOWNLOAD


Ya,walaupun masih jelek tapi sudah cukup deh untuk digunakan sebagai template website dibanding dengan template yang di buat dengan CSS sendiri.

Terima kasih atas kunjungan Anda.
Jika terdapat kata-ata yang SALAH saya meminta maaf,
Pada Allah saya meminta Ampun.
Akhirul kalam.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Kritik dan Saran Anda dapat menjadi hal yang paling bermanfaat untuk blog ini.

MACAM-MACAM JOIN DALAM MYSQL DATABASE

JOIN TABLE DI MYSQL (cross join, inner join, right join, left join, natural join, join using)

Pertama buat sebuah database dengan tabel sebagai berikut :

CREATE TABLE `siswa` (

`id_siswa` int(11) NOT NULL auto_increment,

`nama` varchar(20) NOT NULL,

PRIMARY KEY  (`id_siswa`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

tabel siswa_info

Kemudian buat sebuah tabel lagi dengan nama siswa lengkap.

CREATE TABLE `siswa_info` (

`id_siswa` int(11) NOT NULL,

`alamat` varchar(50) NOT NULL,

`telepon` varchar(15) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Sebagai contoh isi sebagai berikut :

INSERT INTO `siswa` (`id_siswa`, `nama`) VALUES

(1, 'khalifavi'),

(2, 'silvershade'),

(3, 'kaelina');

INSERT INTO `siswa_info` (`id_siswa`, `alamat`, `telepon`) VALUES

(1, 'cigiringsing', '081910435544'),

(2, 'cijambe', '022 7815913'),

(4, 'tubagus ismail', '022 91724325');

Dari isi data tersebut, dapat dilihat bahwa pada tabel siswa, tidak terdapat record dengan id 4, dan begitu pula pada tabel siswa_info tidak terdapat record dengan id 3.

apabila dilakukan join biasa maka beberapa record tidak akan tampil seperti yang di inginkan.

SELECT *

FROM siswa p, siswa_info pk

WHERE p.id_siswa = pk.id_siswa;

Hanya akan menampilkan :

ID_SISWA            NAMA  ID_SISWA            ALAMAT              TELEPON

1              khalifavi               1              cigiringsing          081910435544

2              silvershade         2              cijambe                022 7815913

2 rows in set (0.01 sec)

Lalu dimana yang memiliki id_siswa 3 dan 4?, untuk itulah ada beberapa join khusus.

Untuk menampilkan semua yang terdapat di tabel siswa namun tidak terdapat di tabel siswa_info bisa menggunakan LEFT JOIN

SELECT *

FROM siswa p LEFT JOIN siswa_info pk

ON p.id_siswa = pk.id_siswa;

maka akan menghasilkan,

ID_SISWA            NAMA  ID_SISWA            ALAMAT              TELEPON

1              khalifavi               1              cigiringsing          081910435544

2              silvershade         2              cijambe                022 7815913

3              kaelina  NULL     NULL     NULL

3 rows in set (0.01 sec)

Pada siswaan LEFT JOIN ini, record yang ada di kedua tabel atau hanya di tabel kiri akan selalu ditampilkan, dan akan menghasilkan nilai NULL pada tabel di kanan begitu pula sebaliknya dengan RIGHT JOIN query ini

SELECT *

FROM siswa p RIGHT JOIN siswa_info pk

ON p.id_siswa = pk.id_siswa;

akan menghasilkan, :

ID_SISWA            NAMA  ID_SISWA            ALAMAT              TELEPON

1              khalifavi               1              cigiringsing          081910435544

2              silvershade         2              cijambe                022 7815913

NULL     NULL     4              tubagus ismail   022 91724325

3 rows in set (0.02 sec)

Digunakan untuk menampilkan record yang ada di kedua tabel atau hanya terdapat di tabel kanan.

Note: siswaan SELECT * pada LEFT atau RIGHT join akan menampilkan column yang redundansi. jadi?? Mari lanjutkan.

namun mari bandingkan dengan siswaan NATURAL JOIN

SELECT *

FROM siswa p NATURAL JOIN siswa_info pk;

ID_SISWA            NAMA  ALAMAT              TELEPON

1              khalifavi               cigiringsing          081910435544

2              silvershade         cijambe                022 7815913

2 rows in set (0.00 sec)

ini sama dengan query pertama

SELECT *

FROM siswa p, siswa_info pk

WHERE p.id_siswa = pk.id_siswa;

ID_SISWA            NAMA  ID_SISWA            ALAMAT              TELEPON

1              khalifavi               1              cigiringsing          081910435544

2              silvershade         2              cijambe                022 7815913

2 rows in set (0.01 sec)

Jadi bisa dikatakan bahwa ini penyederhanaan query pertama, namun menghapus column yang redundansi, hmmm, solusi yang bagus juga.

# Note: hasil NATURAL JOIN sama dengan JOIN … USING

SELECT *

FROM siswa p NATURAL JOIN siswa_info pk;

akan menghasilkan output yang sama dengan siswaan JOIN  USING ini.

SELECT *

FROM siswa p JOIN siswa_info pk USING (id_siswa);

ok, sekarang kombinasikan NATURAL JOIN dengan RIGHT JOIN

SELECT *

FROM siswa p NATURAL RIGHT JOIN siswa_info pk;

ID_SISWA            NAMA  ALAMAT              TELEPON

1              khalifavi               cigiringsing          081910435544

2              silvershade         cijambe                022 7815913

4              NULL     tubagus ismail   022 91724325

3 rows in set (0.00 sec)

hmmm, untuk yang ini silahkan bandingkan sendiri, dan mari coba INNER JOIN

SELECT *

FROM siswa p INNER JOIN siswa_info pk

ON p.id_siswa = pk.id_siswa;

ID_SISWA            NAMA  ID_SISWA            ALAMAT              TELEPON

1              khalifavi               1              cigiringsing          081910435544

2              silvershade         2              cijambe                022 7815913

2 rows in set (0.00 sec)

Yang satu ini benar-benar mirip dengan query pertama, dan tanpa perbedaan sama sekali.

#Note: di MySQL, INNER JOIN dan CROSS JOIN ini serupa (dapat saling menggantikan). namun di SQL Standar ini tidak serupa, INNER JOIN dapat menggunakan ON, tapi tidak dengan CROSS JOIN.

MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 2

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Salam sejahtera sahabat.
Semoga kita selalu dalam lindungan-Nya.
Amin Ya Robbal Alamin.

Oke setelah tutorial yang saya tulis pada bagian pertama tersebut membahas tentang "MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian1" menjelaskan bagaimana langkah-langkah dalam pembuatan .htaccess.

Pada kali ini saya akan melanjutkan tutorial tersebut dengan pembuatan kode HTML dan CSS nya.
Langsung saja,
buka editor text milik Anda.

ketikan atau copy paste kode berikut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404 Not Found!</title>
<link href="css/404.css" rel="stylesheet" type="text/css" />
</head>

<body>
        <div class="error">The page you are looking for has not been found!</div>
    <div id="not-found">
        <div class="found">404</div>
    </div>
        <hr />
        <div class="error">Lets start again.</div>
</body>
</html>

Kemudian simpan dengan nama 404.html

Langkah selanjutnya buat sebuah folder dengan nama "css" kemudian buka lagi text editor milik Anda dan ketikkan atau copy paste kode berikut ini.

@charset "utf-8";
/* CSS Document */

* {
    padding:0;
    margin:0;
}
.error {
    width:960px;
    height:auto;
    margin:auto;
    text-align:center;
    font-family:chiller;
    font-size:3em;
    color:rgba(85,85,85,1);
    text-shadow:2px 4.5px 5px #AAAAAA;
}
#not-found {
    width:960px;
    height:auto;
    margin:auto;
    text-align:center;
}
.found {
    font-family:chiller;
    font-size:17em;
    color:rgba(255,153,0,1);
    text-shadow:2px 4.5px 5px #AAAAAA;
}
hr {
    width:31%;
    margin:auto;
    color:rgba(255,153,0,1);
    box-shadow:0px 2px 3px 2px #AAAAAA;
}

Simpan dengan nama 404.css dalam folder "css".

Selesai dan silahkan lihat tampilan 404.html tersebut pada browser kesukaan Anda.
Bagi Anda yang belum mengikuti tutorial bagian pertama bisa klik di bawah ini.
" MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 1"

Terima Kasih!
Sekian artikel yang dapat saya bagikan kepada Anda.
Semoga bermanfaat bagi Anda dan kita semua.

Wassalamu'alaikum Warohmatullohi Wabarokatuh.

MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 1

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat membaca sahabat!
Hari ini saya mulai memposting kembali artikel di blog ini setelah beberapa minggu istirahat.
Yah, sesuai dengan judul pada postingan ini kali ini akan dibahas yaitu membuat "MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess bagian 1" .

Oke, langsung saja.
Pertama buka terlebih dahulu text editor milik Anda bisa menggunakan Notepad bawaan Windows, Dreamweaver, Sublime, Dragon, Notepad++ atau text editor lainnya.

Di localhost / server lokal milik Anda (Disini saya menggunakan xampp).
buat sebuah folder dengan nama "percobaan".
Kemudian ketikkan code seperti berikut:

ErrorDocument 404 /percobaan/404.html

Lalu save dengan nama .htaccess .
Nah sekarang hanya tinggal membuat halaman 404.html.
Belum mengerti cara membuatnya?

Lihat pada link dibawah ini.
"MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 2"

Sekian tutorial dari Admin.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Sampai jumpa di postingan selanjutnya.

Tutorial Membuat Menu Dropdown Dengan Bootstrap

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat pagi dan Salam Sejahtera bagi kita semua.
Semoga kita selalu dalam lindungan-Nya. Amin.

Nah pada kesempatan kali ini saya akan berbagi sedikit pengetahuan yang saya tahu dari bootstrap.
Setelah sebelumnya saya berbagi tentang "Belajar Membuat Social Button Dengan Bootstrap " dan pada hari ini kita akan membahas tentang "Membuat Menu Dropdown Dengan Bootstrap".
Berikut adalah tampilan hasil jadi dan struktur folder yang dibutuhkan:

Dan pada tutorial ini saya akan menyertakan DEMO dan DOWNLOAD filenya. Mari lanjut ke script yang digunakan.
Lihat pada bagian bawah  tutorial ini.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title> Selamat Datang Di Buku Online SMK Negeri 1 Beringin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">        
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="js/jquery.showpassword.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <script src="dist/js/sb-admin-2.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#pass').showPassword('#tampil');
    });
    </script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#"> BUKU ONLINE </a>

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <span class="fa fa-home"></span> Beranda </a></li>
<li><a href="#"> <span class="fa fa-user"></span> Profil</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-book"></span> Kategory Buku <span class="fa fa-angle-double-down"></span> </a>
<ul class="dropdown-menu">
<li><a href=""> <span class="fa fa-book"></span> Doa </a></li>
<li><a href=""> <span class="fa fa-book"></span> Dongeng </a></li>
<li><a href=""> <span class="fa fa-book"></span> Kamus </a></li>
<li><a href=""> <span class="fa fa-book"></span> Teknologi </a></li>
</ul>
</li>
<li><a href="#"> <span class="fa fa-phone"></span> Kontak</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>


Keterangan:
# Navbar-inverse digunakan untuk membuat background berwarna hitam.
ganti dengan Navbar-default untuk mendapatkan warna putih abu-abu.


Nah Sekian dari saya.

Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Salam blogger teman.
Jangan lupa untuk memberikan komentar Anda disini.
Karena kritik dan saran Anda sangat membantu kemajuan blog ini.
See you!

Download Wordpress Theme Simple Grid

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Setelah selang beberapa hari saya tidak update maka hari ini saya akan kembali aktif mengupdate artikel di blog yang ini.

Sesuai dengan judul postingan maka hari ini saya akan membagikan thema lagi yang tentunya gratis...
Dan seperti biasanya untuk link downloadnya ada di bagian paling bawah postingan ini.
Ini dia screen shootnya.

Jangan lupa untuk meninggalkan komentar pada postingan blog ini, karena komen Anda sangat berarti untuk kelangsungan blog ini.

Semoga berguna Amin.

DOWNLOAD DISINI

The World News Theme II For Joomla Download

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Salam sejahtera bagi kita semua pembaca setia postingan ini.

Langsung saja bagi Anda para pecinta CMS khususnya CMS Wordpress yang ingin menggunakan theme THE WORLD NEWS II bisa didownload pada bagian bawah postingan ini.

Ini dia Screen Shoot nya.

Terima kasih.
Sebelumnya tolong berikan komentar Anda pada kolom komentar untuk menambah wawasan saya dan memperbaharui dan mengembangkan blog saya ini.

DOWNLOAD DISINI

DOWNLOAD TEMPLATE WEBSITE ACADEMIA

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Salam sejahtera untuk kita bersama, Amin Ya Robbal Alamin.

Bagi Anda yang ingin mendownload dan segera ingin mendapatkannya bisa langsung mendownloadnya dengan cara mengklik link download yang ada pada bagian bawah postingan ini.

Berikut Screen Shootnya.

Passwornya : www.fittraferdiansyah.blogspot.com

Jangan lupa untuk memberikan komentar Anda di blog ini.
Terima Kasih.

DOWNLOAD DISINI