Archive for September 2014

Home » Archive for September 2014

Membuat FAQ dengan PHP dan MySQL

http://blog.rosihanari.net/membuat-faq-dengan-php-dan-mysql/

Ebook yang direkomendasikan untuk Anda

Dalam kesempatan ini saya akan mencoba untuk menjelaskan bagaimana membuat fasilitas FAQ (Frequently Asked Questions). FAQ merupakan fasilitas yang berupa daftar pertanyaan dan jawaban yang sering ditanyakan oleh user tentang suatu hal. Fasilitas ini dapat dibuat dengan mudah menggunakan PHP dan MySQL.
Mengapa harus menggunakan PHP dan MySQL, toh… kita bisa membuatnya secara statis tanpa perlu menggunakan programming. Dengan PHP dan MySQL kita bisa membuat fasilitas FAQ yang interaktif dan memudahkan administrator dalam mengelola daftar pertanyaan dan jawaban yang ada. MySQL dalam pembuatan FAQ ini diperlukan untuk menyimpan data daftar pertanyaan dan jawaban, sedangkan PHP untuk mewujudkan keinteraktifan dalam pengelolaannya.

Untuk membuat FAQ dengan PHP dan MySQL, langkah pertama kita coba desain tabel untuk menyimpan data pertanyaan dan jawaban. Sebagai contoh, kita bisa membuat struktur tabel sederhana berikut ini:

CREATE TABLE faq

(

id   INT AUTO_INCREMENT,

question TEXT,

answer TEXT,

PRIMARY KEY(id)

)

Karena pada dasarnya FAQ ini hanya berisi pertanyaan dan jawaban, maka tabel harus memuat kedua hal tersebut. Pada tabel di atas, field ‘ID’ digunakan sebagai pembeda antar satu record berisi sebuah pertanyaan dan jawaban dengan record yang lain. Karena merupakan kode pembeda, maka ID ini harus unik oleh karena itu kita set sebagai kunci primer (primary key). Anda boleh menambahkan field tambahan yang lain bila diperlukan, misalkan ditambahkan tanggal dan waktu kapan pertanyaan dan jawaban itu dikirim atau dipublish.
Setelah kita mendesain tabelnya, berikutnya kita akan mendesain aplikasinya. Untuk keperluan mengisi data pertanyaan dan jawaban, kita buat form terlebih dahulu.
form.htm

<h1>Tambah FAQ</h1>

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

Pertanyaan <br />

<textarea name="question" rows="5" cols="30"></textarea><br />

Jawaban <br />

<textarea name="answer" rows="5" cols="30"></textarea><br />

<input type="submit" name="submit" value="Submit" /></td></tr>

</table>

</form>

Tampilan form tambah FAQ di atas tampak di bawah ini

Selanjutnya kita akan membuat script untuk memproses FAQ yang diisikan melalui form di atas. Proses yang dilakukan script ini adalah memasukkannya ke dalam database.
submit.php

<?php

// membaca pertanyaan dari form

$question = $_POST['question'];

// membaca jawaban dari form

$answer = $_POST['answer'];

 

// koneksi ke mysql

mysql_connect(dbhost, dbuser, dbpass);

mysql_select_db(dbname);

 

// query untuk memasukkan FAQ ke tabel DB

$query = "INSERT INTO faq(question, answer) VALUES('$question', '$answer') ";

$hasil = mysql_query($query);

 

// konfirmasi gagal tidaknya memasukkan FAQ ke tabel

if ($hasil) echo "Tambah FAQ sukses";

else echo "Tambah FAQ gagal";

?>

Mudah bukan membuat scriptnya. OK… demikianlah cara membuat script FAQ. Semoga ada manfaatnya buat Anda.
Eit… kayaknya ada yang ketinggalan ya. Oh iya… hampir lupa bagaimana dengan script untuk menampilkan daftar FAQ nya? he.. he 3x padahal yang jadi point penting adalah script ini ya.
OK.. sekarang kita buat script untuk menampilkan daftar FAQ nya.
faq.php

<?php

 

// koneksi ke mysql

mysql_connect(dbhost, dbuser, dbpass);

mysql_select_db(dbname);

 

?>

 

<h1>Daftar FAQ</h1>

 

<?php

$query = "SELECT * FROM faq";

$hasil = mysql_query($query);

echo "<ul>";

while ($data = mysql_fetch_array($hasil))

{

echo "<li>".$data['question']."</li>";

}

echo "</ul>";

?>

Nah.. script di atas baru akan menampilkan daftar pertanyaan FAQ nya. Trus… untuk jawabannya bagaimana? Anda dapat langsung menampilkan pertanyaan dan jawabannya sekaligus dalam script di atas seperti pada script yang dimodifikasi berikut ini
faq.php

<?php

 

// koneksi ke mysql

mysql_connect(dbhost, dbuser, dbpass);

mysql_select_db(dbname);

 

?>

 

<h1>Daftar FAQ</h1>

 

<?php

$query = "SELECT * FROM faq";

$hasil = mysql_query($query);

echo "<ul>";

while ($data = mysql_fetch_array($hasil))

{

echo "<li><em>".$data['question']."</em><br />".$data['answer']."</li>";

}

echo "</ul>";

?>

Dalam script di atas, pertanyaan ditampilkan secara miring (italic) menggunakan tag dan jawabannya ditampilkan di bawahnya.
Selain teknik di atas, Anda dapat juga memunculkan jawabannya dengan mengklik link pada pertanyaan yang diinginkan. Untuk melakukan hal ini, ya… cukup tambahkan link dalam setiap list pertanyaan. Linknya bisa diarahkan ke script lain atau ke script ini sendiri. Dalam contoh ini kita arahkan link ke script ini sendiri (menggunakan $_SERVER['PHP_SELF']). Oya.. jangan lupa dalam link tersebut diberikan parameter berupa ID dari pertanyaannya. ID ini nanti digunakan sebagai kriteria untuk mencari jawabannya.
faq.php

<?php

 

// koneksi ke mysql

mysql_connect(dbhost, dbuser, dbpass);

mysql_select_db(dbname);

 

?>

 

<h1>Daftar FAQ</h1>

 

<?php

$query = "SELECT * FROM faq";

$hasil = mysql_query($query);

echo "<ul>";

while ($data = mysql_fetch_array($hasil))

{

echo "<li><a href='".$_SERVER['PHP_SELF']."?id=".$data['id']."'>".$data['question']."</a></li>";

}

echo "</ul>";

?>

Trus… enaknya detail pertanyaan dan jawaban setelah kita klik link FAQnya akan ditampilkan di mana ya? Coba kita tampilkan di atas daftar FAQ saja deh….
faq.php

<?php

 

// koneksi ke mysql

mysql_connect(dbhost, dbuser, dbpass);

mysql_select_db(dbname);

 

?>

 

<h1>Daftar FAQ</h1>

 

<?php

 

// menampilkan detail FAQ (pertanyaan dan jawaban) setelah link diklik

// blok dalam IF ini hanya akan dijalankan bila terdapat parameter id pada URL, misal: http://.../faq.php?id=...

 

if ($_GET['id'])

{

// membaca parameter id FAQ dari link

$id = $_GET['id'];

 

$query = "SELECT * FROM faq WHERE id = $id";

$hasil = mysql_query($query);

$data = mysql_fetch_array($hasil);

echo "<p>Pertanyaan : ".$data['question']."</p>";

echo "<p>Jawaban : ".$data['answer']."</p>";

}

 

// menampilkan daftar FAQ

$query = "SELECT * FROM faq";

$hasil = mysql_query($query);

echo "<ul>";

while ($data = mysql_fetch_array($hasil))

{

echo "<li><a href='".$_SERVER['PHP_SELF']."?id=".$data['id']."'>".$data['question']."</a></li>";

}

echo "</ul>";

?>

Apabila script faq.php di atas dijalankan, maka akan muncul tampilan berikut ini (dengan asumsi data faq sudah dientri sebelumnya)

Sedangkan berikut ini adalah tampilan ketika sebuah link FAQ diklik untuk melihat detailnya

Nah.. jadi deh script FAQ nya. Lumayan bukan ?? Silakan nanti dimodifikasi sendiri scriptnya. Di sini saya hanya memberikan konsep dan ide pembuatannya saja secara sederhana. Anda bisa menambahkan fitur lain, misalnya fasilitas untuk edit data FAQ dan fasilitas hapus FAQ.
Sebagai referensi, Anda bisa membaca artikel tentang cara membuat script untuk edit data dan penghapusan data yang pernah saya tulis dalam blog ini.

Mendesain Halaman FAQ Keren Dengan CSS3

11:57:00 Add Comment

http://www.tutorial-webdesign.com/membuat-desain-halaman-faq-keren-dengan-css3/

Pada tutorial web design kali ini kita akan mencoba membuat halaman FAQ dengan menggunakan CSS3.

Frequently Asked Questions atau disingkat FAQ sering kali kita temui di website, FAQ biasanya berisikan pertanyaan-pertanyaan yang sering diajukan oleh pengunjung sebuah website kepada pemilik website. Dari pada lelah menjawab pertanyaan yang sama secara berulang kali, makanya dibuat satu halaman yang berisi kumpulan pertanyaan-pertanyaan yang sering diajukan pengunjung.
FAQ with CSS3

Pada tutorial kali ini kita akan membuat nya dengan menggunakan CSS3.
Ada 2 versi yang akan dibuat, cuma beda sedikit kok:

Versi Checkbox: Dimana semua jawaban bisa kita buka/kita pilih dengan cara melakukan klik
Versi Radio Button: Dimana hanya bisa membuka 1 jawaban.

Berikut ini hasilnya

Struktur HTML

Kita mulai dengan membuat struktur markup HTML

1<section class="faq">

2    <div class="faq-left">

3        <!-- FAQ LEFT -->

4    </div>

5 

6    <div class="faq-right">

7        <!-- FAQ RIGHT -->

8    </div>

9</section>

FAQ LEFT

1<div class="faq-left">

2                <h2>.:: Versi Checkbox ::.</h2>

3                <ul class="faq-container">

4 

5                        <li>

6                            <label for="q1">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1" type="checkbox" value="">

7                            <div class="answer">

8                                <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

9                            </div>

10                        </li>

11 

12                        <li>

13                            <label for="q2">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2" type="checkbox" value="">

14                            <div class="big">

15                                <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

16                                <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

17                            </div>

18                        </li>

19 

20                        <li>

21                            <label for="q3">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3" type="checkbox" value="" checked="checked">

22                            <div class="answer">

23                                <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

24                            </div>

25                        </li>

26 

27                        <li>

28                            <label for="q4">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4" type="checkbox" value="">

29                            <div class="answer">

30                                <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

31                            </div>

32                        </li>

33                </ul>

34 

35            </div>

FAQ RIGHT

1<div class="faq-right">

2 

3    <h2>.:: Versi Radio Button ::.</h2>

4    <ul class="faq-container">

5 

6            <li>

7                <label for="q1b">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1b" type="radio" value="">

8                <div class="answer">

9                    <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

10                </div>

11            </li>

12 

13            <li>

14                <label for="q2b">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2b" type="radio" value="">

15                <div class="big">

16                    <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

17                    <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

18                </div>

19            </li>

20 

21            <li>

22                <label for="q3b">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3b" type="radio" value="" checked="checked">

23                <div class="answer">

24                    <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

25                </div>

26            </li>

27 

28            <li>

29                <label for="q4b">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4b" type="radio" value="">

30                <div class="answer">

31                    <p>Maecenas
 justo erat, consectetur vel pellentesque quis, pharetra id tellus. 
Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. 
u</p>

32                </div>

33            </li>

34    </ul>

35 

36</div>

Setelah selesai dengan Struktur HTML, waktunya kita percantik dengan CSS

Code CSS

Pertama kita mengatur tata letak terlebih dahulu

1.faq{

2    width:1100px;

3    margin:0 auto;

4    overflow:visible;

5}

6.faq-left h2,

7.faq-right h2{

8    text-align:center;

9    font-family: 'Open Sans', sans-serif;

10    font-weight:400;

11    text-shadow:2px 2px 2px #f4f4f4;

12}

13.faq-left{

14    float:left;

15    width:550px;

16}

17.faq-right{

18    float:right;

19    width:550px;

20}

21 

22.faq-container{

23    width:500px;

24    margin:20px auto;

25    list-style-type:none;

26}

Selanjutnya kita mulai mempercantik bagian label untuk pertanyaan

1.faq-container li{

2    position:relative;

3    margin:5px 0;

4    -webkit-transition:height 1s ease in out;

5       -moz-transition:height 1s ease in out;

6            transition:height 1s ease in out;

7}

8.faq-container li input{

9    display:none;

10}

11 

12.faq-container li label{

13    font-family: 'Open Sans', sans-serif;

14    font-weight: 400;

15    font-size: 16px;

16    text-shadow: 1px 1px 1px #666;

17    background: #333;

18    background: -webkit-linear-gradient(top, #333 1%, #666 100%);

19    background: -moz-linear-gradient(top, #333 1%, #666 100%);

20    background: linear-gradient(top, #333 1%, #666 100%);

21    color: #fff;

22    display: block;

23    padding: 10px;

24    cursor: pointer;

25    border-radius: 5px 5px 0 0;

26}

27.faq-container li label:hover{

28    background: -webkit-linear-gradient(top, #333 30%, #666 100%);

29    background: -moz-linear-gradient(top, #333 30%, #666 100%);

30    background: linear-gradient(top, #333 30%, #666 100%);

31}

Setelah selesai dengan label pertanyaan, selanjutnya bagian jawaban

1.faq-container li div{

2    overflow: hidden;

3    height:0px;

4    padding:5px 10px;

5    background:#666;

6    background: -webkit-linear-gradient(top, #666 1%, #333 100%);

7    background: -moz-linear-gradient(top, #666 1%, #333 100%);

8    background: linear-gradient(top, #666 1%, #333 100%);

9    position: relative;

10    -webkit-transition: all 0.3s ease-in-out;

11    -moz-transition: all 0.3s ease-in-out;

12    transition: all 0.3s ease-in-out;

13    border-radius:0 0 5px 5px;

14    color:#f7f7f7;

15    font-family: 'Open Sans', sans-serif;

16    font-size:13px;

17}

18.faq-container li div p{margin-top:10px}

19.faq-container li input:checked{

20    background:#000;

21}

22.faq-container li input:checked ~ div{

23    padding-bottom:20px;

24}

25.faq-container li input:checked ~ div.answer{

26    height:50px;

27}

28.faq-container li input:checked ~ div.big{

29    height:110px;

30}

Dan hasil nya adalah seperti berikut ini

Sekian tutorial kali ini, semoga berguna untuk anda. Terima kasih sudah membaca
Jangan lupa Follow Twitter kami di @tut_web
Salam Web Design Indonesia :D