Senin, 03 November 2014

Link Dinamis HTML dan PHP

Assalamualaikum wr.wb

kali ini saya akan memberikan bagaimana caranya membuat link halaman yang dinamis, mungkin sudah banyak sekali yang membahas tentang ini tapi ini yang saya akan bahas, :D....

dalam hal ini saya menggunakan HTML dan PHP. ini tidak akan berjalan ketika menjalankannya menggunakan double klik atau open with pada filenya, ini harus dijalankan menggunakan yang semestinya yaitu, 





diatas saya menggunakan folder latihan, jadi bisa dituliskan "localhost/latihan" atau bisa juga dengan "127.0.0.1/latihan" maka itu akan otomatis keluar hasilnya, untuk konsep dari postingan kali ini, ayok kita lihat gambar dibawah ini :


coba agan lihat disana ada header, Link, Content dan Footer. untuk header dan footer serta link ini tidak akan berubah, yang berubah adalah bagian Content yang nantinya ketika Link di klik maka content akan berubah sesuai isi link tersebut.

File index.php

<html>
    <head>
        <title>Latihan Link</title>
    </head>
    <body>
    <center>
        <table width="800px" height="400px" border="1px">
            <tr>
                <td colspan="2" height="150px" align="center">Header</td>
            </tr>
            <tr>
                <td valign="top" width="100px">
                    Link 1<br />
                    Link 2<br />
                    Link 3<br />
                </td>
                <td align="center" valign="top">Content</td>
            </tr>
            <tr>
                <td colspan="2" height="50px" align="center">Footer</td>
            </tr>
        </table>
    </center>
    </body>
</html>

pada bagian link tambahkan code seperti dibawah ini :


pada bagian content tambahkan code seperti dibawah ini :

<?php
          $page = isset($_GET['page']) ? $_GET['page'] : null;
          switch($page){
                   case "link1" : include("link1.php");break;
                   case "link2" : include("link2.php");break;
                   case "link3" : include("link3.php");break;
         default:include("link1.php");break;
         }
?>

dan untuk full codenya adalah seperti dibawah ini :

<html>
    <head>
        <title>Latihan Link</title>
    </head>
    <body>
    <center>
        <table width="800px" height="400px" border="1px">
            <tr>
                <td colspan="2" height="150px" align="center">Header</td>
            </tr>
            <tr>
                <td valign="top" width="100px">
                    <a href="index.php?page=link1">Link 1</a><br />
                    <a href="index.php?page=link2">Link 2</a><br />
                    <a href="index.php?page=link3">Link 3</a><br />
                </td>
                <td align="center" valign="top">
                    <?php
                        $page = isset($_GET['page']) ? $_GET['page'] : null;
  switch($page){
                            case "link1" : include("link1.php");break;
                            case "link2" : include("link2.php");break;
                            case "link3" : include("link3.php");break;
                        default:include("link1.php");break;
                        }
                    ?>
                    
                </td>
            </tr>
            <tr>
                <td colspan="2" height="50px" align="center">Footer</td>
            </tr>
        </table>
    </center>
    </body>
</html>

dan jangan lupa buat file link1.php , link2.php , link3.php. yang kira =-kira isinya seperti dibawah ini :

File link3.php

<b>Presentasi Sekolah Dalam Rangka Kunjungan GIZ-PAKLIM</b>

<p><a href="smkmuhamka.sch.id">www.smkmuhamka.sch.id</a> - Kementrian Lingkungan Hidup bersama GIZ-PAKLIM (LSM yang berbasis di Jerman) melakukan pemetaan lingkungan sekolah guna menunjang pelaksanaan Education for Sustainable Development (pendidikan untuk pembangunan yang berkelanjutan) pada jenjang sekolah menengah di SMK Muhammadiyah Kajen.  Ruang lingkup kegiatan bersama ini meliputi antara lain: lingkungan hidup, green school, daur ulang, global warming dan sosial ekonomi.</p>

dari contoh link3.php agan bisa mengganti judulnya dan isinya sesuai kemauan agan.

Tampilan akhir :
jika di klik Link 1


Jika di klik Link 2


Jika di klik Link 3


yang berubah hanya pada bagian content-nya saja bagian yang lain tidak berubah sama sekali. dan coba lihat pada web addressnya maka akan terlihat berubah ketika kita klik link 1, link 2, atau link 3.

Ok, cukup sekian dulu postingan kali ini...terimakasih sudah mampir.. 

Wassalamualaikum wr. wb.

File bisa didownload KLIK ME

4 komentar:

  1. Terima kasih kak atas blog nya sangat memabntu saya memahami cara membuat link untuk memanggil konten dinamis dan terus berkarya kak. Perkenalkan nama saya Andrian Antonius Nim saya 1922500215 web kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  2. Terimakasih kak, artikelnya sangat bermanfaat sekali untuk saya belajar membuat link untuk memanggil konten dinamis... Terus dilanjutkan artikelnya ya kak agar dapat memberikan informasi lain yang bermanfaat jga... Perkenalkan nama saya Sintia dan Nim saya 1922500186 dan link Web kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  3. erimakasih kak. Artikel yang kakak buat sangat bagus. Semangat terus ya kak untuk membuat artikelnya. Perkenalkan Nim saya 1922500053, Nama Vidi Bachrum, link kampus saya https://www.atmaluhur.ac.id/
    Salam kenal ya kak.

    BalasHapus