1 Cara Membuat menu drop down di PHP dengan CSS

By Unknown | At Sunday, May 26, 2013 | Label : Css | 1 Comments

Postingan kali ini bayan mau berbagi sedikit pengetahuan tentang bagai mana cara membuat menu drop-down di PHP dengan CSS

Menu drop-down ini biasanya di gunakan pada menu yang memiliki sub menu biar terlihat lebih rapi pada menu tersebut, oke mari kita langsung ke TKP aj.

Untuk struktur dasarnya kita menggunakan struktur XHTML seperti di bawah ini :

<ul id="nav">
<li><a href="#">Beranda</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Arsip</a>
<ul>
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</li>
<li><a href="#">Bloghack</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>

Langkah 2

Selanjutnya kita beri sentuhan CSS untuk memper indah tampilannya :

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}

Keterangan kode CSS di atas aken menhilangkan identifikasi pada browser dan akan menghilangkan tanda bulat pada #nav dan semua element yang ada di dalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menumenu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya.  

Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS ini.

Langkah 3

Percantik menu dengan setting CSS lebih lanjut:

/* keadaan menu normal, aktif dan pernah diakses */
#nav a:link, #nav a:active, #nav a:visited {
display:block; /* link menu di blok */
padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
color:#fff; /* warna teks */
text-decoration:none; /* menghilangkan garis bawah pada link menu */
background-color:#333; /* warna latar belakang menu */
}
/* keadaan menu saat dipilih */
#nav a:hover {
background-color:#fff; /* warna latar belakang menu */
color:#333; /* warna huruf */
}

Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama.

Langkah 4

Menyempurnakan tampilan dengan kode CSS berikutnya:

#nav li {
float:left; /* menu ditempatkan pada sebelah kiri */
position:relative; /  * posisi relatif */
}

Kode CSS diatas akan membuat menu tersusun secara horisontal

#nav ul {
position:absolute; /* posisi absolute */
width:12em; /* lebar menu */
top:1.5em; /* jarak menu bagian atas */
display:none; /* menu disembunyikan */
}

Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menumemiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #nav (lihat langkah 2)

#nav li ul a {
width:12em;
float:left;
}

Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.

#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

#nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.

Untuk lebih mempercantik lagi dan memiliki efek yang lembut saat menu-menu di tampilkan.

Langkah 5

Sekarang kita beri sentuhan jQuery dan mengkombinasikan dengan menu dropdown yang kita buat tadi, tambahkan kode seperti berikut :

$(document).ready(function(){
$(" #nav ul ").css({display: "none"});
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
});

Fungsi dari masing-masing script jQuery:

$(" #nav ul ").css({display: "none"}); // Perbaikan di Opera

Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover) pada sub menu, maka menu akan memiliki efek berkedip (flicker). $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none).

$(" #nav li").hover(function(){ //memberikan efek saat menu dipilih (hover)
},function(){ //memberikan efek saat pointer mouse meninggalkan menu
});

Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih.

$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.

$(this).find('ul:first').css({visibility: "hidden"});

Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya. Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu.

Untuk hasilnya kurang lebih seperti gambar di bawah ini :

Sekian cara membuat menu drop-down di PHP dengan CSS, semoga bermanfaat amien.

0 Turning a list into a navigation bar

By Unknown | At Friday, May 24, 2013 | Label : Css | 0 Comments

I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up.

Note: Since this article was published I have changed the markup and CSS for the navigation bar a bit, so the technique for highlighting the active link is no longer in use.

I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.

The HTML
The markup is very simple. It’s an unordered list, with each link in a separate list item:

1. <ul id="nav">
2. <li id="nav-home"><a href="#">Home</a></li>
3. <li id="nav-about"><a href="#">About</a></li>
4. <li id="nav-archive"><a href="#">Archive</a></li>
5. <li id="nav-lab"><a href="#">Lab</a></li>
6. <li id="nav-reviews"><a href="#">Reviews</a></li>
7. <li id="nav-contact"><a href="#">Contact</a></li>
8. </ul>

Step 1

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list.

The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.

First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

1. #nav {
2. margin:0;
3. padding:0;
4. }
5. #nav li {
6. display:inline;
7. padding:0;
8. margin:0;
9. }

This will make all the links display one after another on the same line, as if the list wasn’t there. It will also remove the list bullets, since they are only displayed when display:list-item  (the default display mode for list items) is used.

Some browsers are said to incorrectly display the list bullets even though display:inline has been applied to the list items.

I haven’t seen this happen in any of the browsers I tested in, but if you want to make sure that no browsers display list bullets, you can add list-style-type:none to the rule for #nav.

Next, it’s time to start styling the menu tabs. I do this by adding styles to the links, not to the list items. The reason for that is that I want the entire area of each tab to be clickable. First a bit of colour to make the changes more obvious:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. }

Step 3
Note that I’m styling the normal and visited states of the links to look the same. the next step is to add a bit of padding to the links:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. }

Step 4

That’s a bit better. But there is a potential problem that isn’t visible here. Since the links are inline elements, their vertical padding will not add to their line height. It’s easier to see this if the ul element has a background, so I’ll add a background colour and a background image:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. }

Step 5

Oops. Now the links are sticking out of the list element. To fix this, I’ve turned the links into block boxes by floating them to the left. I’ve also set their width to auto, to make them shrink to fit their content:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. }

Step 6

Adding display:block to the CSS rule for the links would also have made them block boxes, but since a floated element automatically generates a block box, that isn’t necessary.

As you may have noticed, the background disappeared when the links were floated. That’s because floated elements are taken out of the document flow, which causes the ul element containing them to have zero height. Thus, the background is there, but it isn’t visible.

To make the ul enclose the links, I’ve floated that too. I’ve also set its width to 100%, making it span the whole window (except for the padding I’ve given the body element in this example):

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. }

Step 7

To visually separate the links from each other, I’ve added a right border to the links. Then, to give the first link a left border as well, I’ve used a :first-child pseudo-class to apply a rule only to the link in the very first list item.

I’ve also added top and bottom borders to the ul element:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. border:1px solid #42432d;
8. border-width:1px 0;
9. }
10. #nav a:link,
11. #nav a:visited {
12. color:#000;
13. background:#b2b580;
14. padding:20px 40px 4px 10px;
15. float:left;
16. width:auto;
17. border-right:1px solid #42432d;
18. }
19. #nav li:first-child a {
20. border-left:1px solid #42432d;
21. }

The: first-child pseudo-class is not recognised by Internet Explorer for Windows, so the first link won’t have a left border in that browser. In this case, that isn’t a major problem, so I’ve left it like that. If it’s really important to you, you’ll need to add a class to the first list item (or the link in it), and then use that to give the link a left border.

Step 8

Next I’ve changed the way the link text is displayed by removing the underlining, making the text bold, specifying font size, line-height, and a different font family, making the text uppercase, and adding a little bit of drop shadow.

The drop shadow is created with the text-shadow property, a CSS3 property that is currently only supported by Safari and OmniWeb:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. border-right:1px solid #42432d;
9. text-decoration:none;
10. font:bold 1em/1em Arial, Helvetica, sans-serif;
11. text-transform:uppercase;
12. text-shadow: 2px 2px 2px #555;
13. }

Step 9

To give some visual feedback when the links are hovered over or tabbed to, I’ve given their :

hover And : focus states different text and background colours:

1. #nav a:hover,
2. #nav a:focus {
3. color:#fff;
4. background:#727454;
5. }

Step 10

In the final step, I’ve added rules that will make the selected link look different than the others, to show visitors where they are on the site.

In case you haven’t seen an example of specifying an id attribute for the body element to style the “current” navigation tab differently before, that’s what the first two rules do. In the examples linked to from this article, I’ve set id of the body element to “home”, which makes the “Home” tab the current one.

Changing it to “about” would make the “About” tab the current one, and so on. I’ve also made the selected link stay the same when it’s hovered over. It can be argued that the current menu item should not be a link at all. In this case, I’ve chosen to leave the link in the markup and use CSS to remove the visual feedback on hover.

To give some visual feedback when you click on one of the links, I’ve given the :active state of the links the same styling as the selected link:

1. #home #nav-home a,
2. #about #nav-about a,
3. #archive #nav-archive a,
4. #lab #nav-lab a,
5. #reviews #nav-reviews a,
6. #contact #nav-contact a {
7. background:#e35a00;
8. color:#fff;
9. text-shadow:none;
10. }
11. #home #nav-home a:hover,
12. #about #nav-about a:hover,
13. #archive #nav-archive a:hover,
14. #lab #nav-lab a:hover,
15. #reviews #nav-reviews a:hover,
16. #contact #nav-contact a:hover {
17. background:#e35a00;
18. }
19. #nav a:active {
20. background:#e35a00;
21. color:#fff;
22. }

Step 11

That’s it. This step-by-step tutorial makes the whole thing look more advanced than it really is. View source on the final example to see the complete set of CSS rules.

By the way, with a couple of small exceptions (the left border on the first link, and the text shadow), this works in just about any browser, even Internet Explorer (version 5 or newer).

I hope you’ve been able to follow along well enough to be able to create your own navigation menu. The styling possibilities are almost endless.

Source : Turning a list into a navigation bar
 

0 Malam Lailatul Qadar

By Unknown | At Wednesday, August 08, 2012 | Label : Fiqh | 0 Comments

Bismillahirrahmanirrahim.........!

Sehubungan dengan adanya pertanyaan dari seseorang yang namanya bla bla bla.... :) :) tentang malam seribu bulan (lailatul qadar) maka bayan akan berbagi sedikit pengetahuan tentang Malam Lailatul Qadar.

Allah ta'ala berfirman :

"Sesungguhnya Kami telah menurunkannya (Al-Qur'an) saat Lailatul Qadar (malam kemuliaan). Dan tahukah kamu apakah Lailatul Qadar itu? Lailatul qadar itu lebih baik dari seribu bulan. Pada malam itu turun malaikat-malaikat dan malaikat Jibril dengan izin Tuhannya untuk mengatur segala urusan. Malam itu (penuh) kesejahteraan sampai terbit fajar. "(Al-Qadr: 1-5),

Allah memberitahukan bahwa Dia menurunkan Al-Qur'an pada malam Lailatul Qadar, yaitu malam yang penuh keberkahan. Allah Ta'ala berfirman :

"Sesungguhnya Kami menurunkannya pada suatu malam yang diberkahi."(Ad-Dukhaan: 3)

Dan malam itu berada di bulan Ramadhan, sebagaimana firman Allah Ta 'ala :

"Bulan Ramadhan, bulan yang di dalamnya diturunkan Al-Qur'an. "(Al-Baqarah: 185).

Ibnu Abbas radhiallahu 'anhu berkata :

"Allah menurunkan Al-Qur'anul Karim keseluruhannya secara sekaligus dari Lauh Mahfudh ke Baitul'Izzah (langit pertama) pada malam Lailatul Qadar. Kemudian diturunkan secara berangsur-angsur kepada Rasulullah shallallahu 'alaihi wasallam sesuai dengan konteks berbagai peristiwa selama 23 tahun."

Malam itu dinamakan Lailatul Qadar karena keagungan nilainya dan keutamaannya di sisi Allah Ta 'ala. Juga, karena pada saat itu ditentukan ajal, rizki, dan lainnya selama satu tahun, sebagaimana firman Allah :

"Pada malam itu dijelaskan segala urusan yang penuh hikmah. " (Ad-Dukhaan: 4).

Kemudian, Allah berfirman mengagungkan kedudukan Lailatul Qadar yang Dia khususkan untuk menurunkan Al-Qur'anul Karim:

"Dan tahukah kamu apakah Lailatul Qadar itu?" ( Lihat Tafsir Ibnu Katsir, 4/429.)

Selanjutnya Allah menjelaskan nilai keutamaan Lailatul Qadar dengan firman-Nya:

"Lailatul Qadar itu lebih baik dari pada seribu bulan. "

Maksudnya, beribadah di malam itu dengan ketaatan, shalat, membaca, dzikir dan do'a sama dengan beribadah selama seribu bulan, pada bulan-bulan yang di dalamnya tidak ada Lailatul Qadar. Dan seribu bulan sama dengan 83 tahun 4 bulan.

Lalu Allah memberitahukan keutamaannya yang lain, juga berkahnya yang melimpah dengan banyaknya malaikat yang turun di malam itu, termasuk Jibril 'alaihis salam. Mereka turun dengan membawa semua perkara, kebaikan maupun keburukan yang merupakan ketentuan dan takdir Allah. Mereka turun dengan perintah dari Allah. Selanjutnya, Allah menambahkan keutamaan malam tersebut dengan firman-Nya :

"Malam itu (penuh) kesejahteraan hingga terbit fajar" (Al-Qadar: 5)

Maksudnya, malam itu adalah malam keselamatan dan kebaikan seluruhnya, tak sedikit pun ada kejelekan di dalamnya, sampai terbit fajar. Di malam itu, para malaikat -termasuk malaikat Jibril- mengucapkan salam kepada orang-orang beriman.

Dalam hadits shahih Rasulullah shallallahu 'alaihi wasallam menyebutkan keutamaan melakukan qiyamul lail di malam tersebut. Beliau bersabda :

"Barangsiapa melakukan shalat malam pada saat Lailatul Qadar karena iman dan mengharap pahala Allah, niscaya diampuni dosa-dosanya yang telah lalu. " (Hadits Muttafaq 'Alaih)

Tentang waktunya, Rasulullah shallallahu 'alaihi wasallam bersabda :

"Carilah Lailatul Qadar pada (bilangan) ganjil dari sepuluh hari terakhir bulan Ramadhan. " (HR. Al-Bukhari, Muslim dan lainnya).

Yang dimaksud dengan malam-malam ganjil yaitu malam dua puluh satu, dua puluh tiga, dua puluh lima, dua puluh tujuh, dan malam dua puluh sembilan. Adapun qiyamul lail di dalamnya yaitu menghidupkan malam tersebut dengan tahajud, shalat, membaca Al-Qur'anul Karim, dzikir, do'a, istighfar dan taubat kepada Allah Ta 'ala.

Aisyah radhiallahu 'anha berkata, aku bertanya:

"Wahai Rasulullah, apa pendapatmu jika aku mengetahui lailatul Qadar, apa yang harus aku ucapkan di dalamnya?"

Beliau menjawab, katakanlah :

"Ya Allah, sesungguhnya Engkau Maha Pengampun, Engkau mencintai Pengampunan maka ampunilah aku. " (HR. At-Tirmidzi, ia berkata, hadits hasan shahih).

Pelajaran dari surat Al-Qadr :

Keutamaan Al-Qur'anul Karim serta ketinggian nilainya, dan bahwa ia diturunkan pada saat Lailatul Qadar.

Keutamaan dan keagungan Lailatul Qadar, dan bahwa ia menyamai seribu bulan yang tidak ada Lailatul Qadar di dalamnya.

Anjuran untuk mengisi kesempatan-kesempatan baik seperti malam yang mulia ini dengan berbagai amal shalih.

Jika Anda telah mengetahui keutamaan-keutamaan malam yang agung ini, dan ia terbatas pada sepuluh hari terakhir bulan Ramadhan maka seyogyanya Anda bersemangat dan bersungguh-sungguh pada setiap malam dari malam-malam tersebut, dengan shalat, dzikir, do'a, taubat dan istighfar. Mudah-mudahan dengan demikian Anda mendapatkan Lailatul Qadar, sehingga Anda berbahagia dengan kebahagiaan yang kekal yang tiada penderitaan lagi setelahnya Di malam-malam tersebut, hendaknya Anda berdo'a dengan do'a-do'a bagi kebaikan dunia-akhirat, di antaranya :

"Ya Allah, perbaikilah untukku agamaku yang merupakan penjaga urusanku, dan perbaikilah untukku duniaku yang di dalamnya adalah kehidupanku, dan perbaikilah untukku akhiratku yang kepadanya aku kembali, dan jadikanlah kehidupan (ini) menambah untukku dalam setiap kebaikan, dan kematian menghentikanku dari setiap kejahatan. Ya Allah bebaskanlah aku dari (siksa) api Neraka, dan lapangkanlah untukku rizki yang halal, dan palingkanlah daripadaku kefasikan jin dan manusia, wahai Dzat Yang Hidup dan terus menerus mengurus (makhluk-Nya)"

"Wahai Tuhan kami, berikanlah kepada kami kebaikan di dunia dan kebaikan di akhirat dan jagalah kami dari siksa Neraka. Wahai Dzat Yang Hidup lagi terus menerus mengurus (makhluk-Nya), wahai Dzat Yang Memiliki Keagungan dan Kemulyaan. "

"Ya Allah, sesungguhnya aku memohon hal-hal yang menyebabkan (turunnya) rahmat-Mu, ketetapan ampunan-Mu, keteguhan dalam kebenaran dan mendapatkan segala kebaiikan, selamat dari segala dosa, kemenangan dengan (mendapat) Surga serta selamat dari Neraka. Wahai Dzat Yang Maha Hidup dan terus menerus mengurusi makhluk-Nya, Wahai Dzat yang memiliki Keagungan dan Kemuliaan. "

"Ya Allah, aku memohon kepada-Mu pintu-pintu kebajikan, kesudahan (hidup) dengannya serta segala yang menghimpunnya, secara lahir-batin, di awal maupun di akhirnya, secara terang- terangan maupun rahasia. YaAllah, kasihilah keterasinganku di dunia dan kasihilah kengerianku di dalam kubur serta kasihilah berdiriku di hadapanmu kelak di akhirat. Wahai Dzat Yang Mahahidup, yang memiliki Keagungan dan Kemuliaan. "

"Ya Allah, sesungguhnya aku memohon kepada-Mu petunjuk, ketakwaan, 'afaaf (pemeliharaan dari segala yang tidak baik) serta kecukupan. "

"Ya Allah, sesungguhnya Engkau Maha Pengampun, mencintai pengampunan maka ampunilah aku. "

"Ya Allah, aku mengharap rahmat-Mu maka janganlah Engkau pikulkan (bebanku) kepada diriku sendiri meski hanya sekejap mata, dan perbaikilah keadaanku seluruhnya, tidak ada Tuhan (yang berhak disembah) selain Engkau. "

"Ya Allah, jadikanlah kebaikan sebagai akhir dari semua urusan kami, dan selamatkanlah kami dari kehinaan dunia dan siksa akhirat. "

"Ya Tuhan kami, terimalah (permohonan) kami, sesungguhnya Engkau Maha Mendengar lagi Maha Mengetahui, wahai Dzat Yang Maha Hidup, yang memiliki keagungan dan kemuliaan."

"Semoga shalawat dan salam dilimpahkan kepada Nabi Muhammad, segenap keluarga dan para sahabatnya. "

Semoga artikel tentang Malam Lailatul Qadar bermanfaat dan menjadi petunjuk bagi kita semua untuk terus meningkatkan iman dan taqwa kita kepada sang khaliq, amien.

Wassalam..........!

0 Cara Membuat Scroll Pada Postingan Di blog

By Unknown | At Monday, August 06, 2012 | Label : Blogging | 0 Comments

Bismillahirrohmanirrohim............!

Ketemu lagi dengan bayan, kali ini bayan akan berbagi pengetahuan tentang Cara Membuat Scroll Pada Postingan Di Blog Pada sebelumnya bayan kebingungan saat mempostingkan Coding-coding yang sangat banyak, sehingga memkan halamn yang sangat panjang,Nah,,, Dengan adanya Scroll ini bisa mengefisienkan tempat atau halaman blog.



Ok langsung aja bayan mulai caranya. Caranya cukup mudah, sobat tinggal menyisipkan Kode di bawah ini setiap posting :

<div style="overflow:auto;width:450px;height:200px;padding:10px;border:1px solid #eee"> LETAKKAN TULISAN SOBAT / KODE HTML DISINI </div>

• Tapi sobat harus meletakkan kode di atas pada menu HTML bukan pada menu COMPOSE
  
  

















• Stelah sobat meletakkan pada menu HTML, sobat bisa langsung mengeceknya pada menu COMPOSE

Nah ...

Selesai suda Cara Membuat Scroll Pada Postingan Di Blog,Semoga bermanfaat.

Mohon kritik dan sarannya dari sobat-sobat semua karna bayan masih sangat banyak kekurangannya dan demi kemajuan blogger indonesia

5 Cara Sederhana View, Tambah, Edit, dan Hapus Pada PHP

By Unknown | At Wednesday, August 01, 2012 | Label : Php | 5 Comments

Bismillahirrohmanirrohim..............!

Hai sobat semua kali ini bayan mau mempostingkan Cara Sederhana View, Tambah, Edit, dan Hapus Pada PHP, meskipun pengetahuan bayan masih terlalu sangat kurang tentang PHP Tapi gak salah kan kalo bayan berbagi sedikit pengetahuan bayan.

Oke langsung mulai aja, Sebelum sobat bisa mempraktekkan script-script di bawah ini, sobat harus membuat sebuah database bernama mid.

Di dalam database mid, anda harus membuat sebuahtabel bernama nilai. Adapun strukturnya adalah sebagai berikut:

Nama field	Type
nis	Char(3)
nama	Varchar(30)
nilai	Decimal(6,2)

Catatan:

Ini adalah contoh script PHP paling sederhanauntuk menambah, mengedit, dan mengupdate data. Tidak ada prosedur validasi data, sehingga rentan terhadap serangan hacker.
Silahkan sobat buat file PHP seperti yang telah ane tuliskan di bawah ini, atau bisa langsung di kopast aja,
he he he he............!

Nama file: index.php

<html> 

<head> 

<title>Menampilkan Data</title> 

</head> 

<body> 

<?php 

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server."); 

mysql_select_db("mid") or die("Gagal membuka database."); 

?> 

<p><a href="tambah.php">Tambah data</a></p> 

<table border="1"> 

<tr align="center">

<td>NIS</td>

<td>Nama</td>

<td>Nilai</td>

<td>Action</td>

</tr>

<?php

$query = "select * from nilai";

$hasil = mysql_query($query, $koneksi) or die("Gagal melakukan query.");

while ($buff = mysql_fetch_array($hasil)) {

?>

<tr>

<td><?php echo $buff['nis']; ?></td>

<td><?php echo $buff['nama']; ?></td>

<td><?php echo $buff['nilai']; ?></td>

<td><a href="edit.php?nis=<?php echo $buff['nis']; ?>">Edit</a> |

<a href="hapus.php?nis=<?php echo $buff['nis']; ?>">Hapus</a></td>

</tr>

<?php

};

mysql_close($koneksi);

?>

</table>

</body>

</html> 

Nama file: tambah.php

<html>
<head>
<title>Menambah Data</title>
</head> 
<body>
<form name="form1" method="post" action="tambah2.php">
<table border="1">
<tr>
<td>NIS</td>
<td>:</td>
<td><input name="nis" type="text" /></td>
</tr>
<tr>
<td>Nama</td>

<td>:</td>
<td><input name="nama" type="text" /></td>
</tr>
<tr>
<td>Nilai</td>
<td>:</td>
<td><input name="nilai" type="text" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
</tr>
</table>
</form>
<p>Batal menambah data. Kembali ke <a href="index.php">index.php</a></p>
</body>
</html> 

Nama file: tambah2.php

<html>

<head>
<title>Menambah Data</title>
</head>
<body>
<?php
$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");
mysql_select_db("mid") or die("Gagal membuka database.");
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$nilai = $_POST['nilai'];
$query = mysql_query("insert into nilai values ('$nis', '$nama', '$nilai')");
mysql_close($koneksi);
?>
<p>Data sudah tersimpan. Silakan dicek di <a href="index.php">index.php</a></p>
</body>
</html>

Nama file: edit.php

<html>

<head>

<title>Mengedit Data</title>

</head>

<body>

<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_GET['nis'];

$query = "select * from nilai where nis='$nis'";

$hasil = mysql_query($query, $koneksi) or die("Gagal melakukan query.");

$buff = mysql_fetch_array($hasil);

mysql_close($koneksi);

?>

<form name="form1" method="post" action="edit2.php">

<input type="hidden" name="nis" value="<?php echo $buff['nis']; ?>" />

<table border="1">

<tr>

<td>NIS</td>

<td>:</td>

<td><?php echo $buff['nis']; ?></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input name="nama" type="text" value="<?php echo $buff['nama']; ?>" /></td>

</tr>

<tr>

<td>Nilai</td>

<td>:</td>

<td><input name="nilai" type="text" value="<?php echo $buff['nilai']; ?>" /></td>

</tr>

<tr>

<td colspan="3"><input type="submit" name="submit" value="Simpan" /></td>

</tr>

</table>

</form>

<p>Batal mengedit data. Kembali ke <a href="index.php">index.php</a></p>

</body>

</html>

Nama file: edit2.php

<html>

<head>

<title>Mengedit Data</title>

</head>

<body>

<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_POST['nis'];

$nama = $_POST['nama'];

$nilai = $_POST['nilai'];

$query = mysql_query("update nilai set nama='$nama', nilai='$nilai' where nis='$nis'");

mysql_close($koneksi);

?>

<p>Data sudah ter-update. Silakan dicek di <a href="index.php">index.php</a></p>

</body>

</html>

Nama file: hapus.php

<html>

<head>

<title>Menghapus Data</title>

</head>

<body>

<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_GET['nis'];

mysql_query("delete from nilai where nis='$nis'") or die("Gagal menghapus data.");

mysql_close($koneksi);

?>

<p>Data telah dihapus. Silakan dicek di <a href="index.php">index.php</a></p>

</body>

</html>

Maka hasil akhirnya seperti pada gambar di bawah ini :

Semoga artikel tentang Cara Sederhana View, Tambah, Edit, dan Hapus Pada PHP bermanfaat, Mohon kritik dan sarannya dari sobat-sobat semua, karna pepatah mengatakan tak ada gading yang tak retak
demi kemajuan blogger indonesia.
Wassalam...........!